Get DevWP - WordPress Development Theme

CSS Box Model

We view online content on a device that’s shaped like a box, typically in a rectangle shape. Whether it’s a desktop, laptop, tablet or smart phone. They are all in the shape of a rectangular box.

That’s why we style websites with a concept called the CSS Box Model that describes how elements are visually placed on web pages.

The CSS Box Model is basically a box that wraps around each HTML element that consists of:

  • Content – the actual content on the page like text, images, videos etc
  • Padding – which is area around the content. Note: padding is transparent
  • Border – which goes around the padding and content
  • Margin – which is a transparent area outside the border area

CSS Block and Inline Boxes

As mentioned in a previous HTML Tutorial I shared with you the difference between Block and Inline Elements which apply here as well.

Block Level Elements will take up 100% of the container it’s in, the width and height of the element is respected and they will always break onto a new line. Padding, Margin and Border will cause other HTML elements to be pushed away from the box.

Inline Level Elements only take up the space on the line that’s needed, width and height do not apply.

The display property is what determines the type of box that’s applied to an element and can be overridden.

Note: When you set the width and height properties of an HTML element with CSS, you only set the width and height of the content area. To calculate the full size of an element, you have to add padding, borders and margins as well.


div {
  width: 760px;
  padding: 10px;
  border: 1px solid black;
  margin: 0;
}

Here’s the way the code above will be calculated by the browser.

  • 760px is the width
  • + 20px for the left and right padding
  • + Border is 2px total for both left and right
  • Margin is set to 0
  • Total is 782px

You’re basically adding the width of the HTML element + the left and right padding + left and right border + left and right margin.

When you want to calculate the height, you add the height of the element + top and bottom padding + top and bottom border + top and bottom margin.

You will often find the value height: auto; used on some HTML elements.

Browser Developer Tools

If you want to see a live representation of the CSS Box Model, right click in your browser window and select the Inspect Elements option. Then on the right hand side of the developer tools that opens up, you can scroll to the bottom and you will see a CSS Box Model Representation of the element you’re inspecting. If you hover over each color coded are, the browser will show you its affect on the element.



View Our Themes