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

Last Updated: 7 years ago 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.

I am passionate about what I do.

I spend over 48 hours a week on SEO and digital marketing.

"And whatsoever you do, do it heartily, for YHWH, and not for men." (Colossians 23:3)