)

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

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

Recommendations

  • FastPixel WP Caching plugin - FastPixel offers all the latest technology on how to accelerate your website neatly packed in a 1-minute-setup plugin.
  • BrandPush - gets you featured on 200+ news sites. Go viral with massive exposure through the likes of Daily Herald, Fox40, Digital Journal, Benzinga, The Chronicle Journal, NewsMax, AP, and even through Bloomberg and MSN.
  • SimpleTraffic - drives real visitors to your website, blog, or affiliate link. Get started with 2500 free visitors on your 5 day free trial!
  • MediaServe - is a web hosting service that values free speech, providing content policies and support aligned with these values. It is also known as free speech web hosting.
  • Leaver - is a web hosting service tailored for conservatives, providing content policies and support aligned with conservative values --- conservative web hosting.
  • Pictory - Create videos QUICKLY from scripts, articles, videos, or other channels.

Discover more tools - See our recommended tools, software, and services.

I am passionate about what I do.

While I spend over 48 hours a week on SEO and digital marketing, it's not accurate to say that I live and breathe them..

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

Recommendations

Discover more tools - See our recommended tools, software, and services.

Support Our Affiliate Partner: Grab Your FREE Plan Now!