CSS Box Model: How to See the Boxes on Each Element

HTML elements are placed within a box, and browsers understood that these elements are in a container or a box.

When the background color of an element is changed, the background color of the container or box is also changed.
When text is aligned, the text is aligned relative to it’s box or container.

This is a very good foundation when trying to create a custom website.

This is an easy way to reveal or see the box model of a website you are working by placing the code below on your stylesheet (CSS).

* {
border: 1px solid rgba(0, 0, 0, 0.3);

Though there are ways to view the box model; the above code is a good way for beginners to understand.

Share and let us learn from each other:

Published by Neil Anthony

I am passionate on what I do. SEO is one of them.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.