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

Last Updated on August 22, 2017 by BrodNeil

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.

Leave a Comment