Box Model

The CSS Podcast - 001: The Box Model

Say you have this bit of HTML:

<p>I am a paragraph of text that has a few words in it.</p>

Then you write this CSS for it:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

The content ends up 142px wide, instead of the 100px you specified, and it breaks out of your element. Why is that?

The box model is a core foundation of CSS. Understanding how the box model works, how it's affected by other aspects of CSS, and importantly, how you can control it, can help you write more predictable CSS.

It's important to remember that everything displayed by CSS is a box, even if it's just some text, or has a border-radius that makes it look like a circle.

Content and sizing

Boxes have different behavior based on their display value, their set dimensions, and the content they contain. This content could be plain text, or more boxes generated by child elements. Either way, the content affects the size of the box by default.

You can control this using extrinsic sizing, or you can use intrinsic sizing to let the browser make decisions for you based on the content size.

Here's a basic demo that explains the difference:

The demo has the words "CSS is awesome" in a box with fixed dimensions and a thick border. Because the box has a specified width, it's extrinsically sized. This means it controls the sizing of its child content. However, the word "awesome" is too large for the box, so it overflows outside the parent box's border box (more on this later). One way to prevent this overflow is to let the box be intrinsically sized by either not setting the width, or in this case, setting the width to min-content. The min-content keyword tells the box to be only as wide as the intrinsic minimum width of its content (the word "awesome"). This lets the box fit perfectly around the text.

Here's a more complex example that shows the impact of different sizing on real content:

Toggle intrinsic sizing on and off to see how extrinsic sizing gives you more control with extrinsic sizing and intrinsic sizing gives the content more control. To see the effects add a few sentences of text to the card. When this element has extrinsic sizing, there's a limit to how much content you can add before it overflows, but that doesn't happen when intrinsic sizing is toggled on.

By default, this element has a set width and height of 400px each. These dimensions give strict bounds to everything inside the element, which are honored unless the content is too large for the box. You can see this in action by changing the caption under the flower picture to something that exceeds the height of the box.

Key term: Overflow happens when content is too big for the box it's in. You can manage how an element handles overflow content using the overflow property.

Switching to intrinsic sizing lets the browser make decisions for you based on the box's content size. This makes overflow much less likely because the box resizes with its content.

It's important to remember that intrinsic sizing is the browser's default behavior, and it usually provides much more flexibility than extrinsic sizing.

The areas of the box model

Boxes are made up of distinct box model areas that all do a specific job.

The content box is the area that the content lives in. The content can control the size of its parent, so this is usually the most variably sized area.

The padding box surrounds the content box and is the space created by the padding property. Because padding is inside the box, the box's background is visible in the space it creates. If the box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars also occupy this space.

The border box surrounds the padding box, and its space is defined by the border value, which creates a visual frame for the element. The element's border edge is the limit of what you can see.

The final area, the margin box, is the space around your box, defined by the box's margin rule. Properties such as outline and box-shadow occupy this space too because they're painted on top of the element and don't affect the size of the box. Changing your box's outline-width of 200px on a box doesn't change anything inside the border edge.

A useful analogy

The box model is complex to understand, so here's an analogy for what you've learned so far.

In this diagram, you have three picture frames mounted next to each other on a wall. Elements of the framed image correspond to the box model as follows:

• The content box is the artwork.
• The padding box is the white mounting board, between the frame and the artwork.
• The border box is the frame, providing a literal border for the artwork.
• The margin box is the space between frames.
• The shadow occupies the same space as the margin box.

Debug the box model

Browser DevTools provide a visualisation of a selected box's box model calculations, which can help you understand how the box model works and how it affects the website you're working on.

Try this in your own browser:

1. Open DevTools.
2. Select an element.
3. Show the box model debugger.

Control the box model

To understand how to control the box model, you first need to understand what happens in your browser.

Every browser applies a user agent style sheet to HTML documents that defines how elements should look and behave if they don't have defined CSS. The CSS in user agent style sheets varies between browsers, but they provide sensible defaults to make content easier to read.

One property the user agent style sheet sets a box's default display. For example, in a normal flow, a <div> element's default display value is block, a <li> has a default display value of list-item, and a <span> has a default display value of inline.

An inline element has a block margin, but other elements don't respect it. With inline-block, other elements respect the block margin, but the first element keeps most of the same behaviors it had as an inline element. A block item fills the available inline space by default, whereas inline and inline-block elements are only as large as their content.

The user agent style sheet also sets box-sizing, which tells a box how to calculate its box size. By default, all elements have the following user agent style: box-sizing: content-box;. This means that when you set dimensions such as width and height, those dimensions apply to the content box. If you then set padding and border, these values are added to the content box's size.

Check your understanding

Test your knowledge of box model size impacting properties.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

The actual width of this box is 260px. Because the CSS uses the default box-sizing: content-box, the applied width is the width of the content, and padding and border on both sides are added to that. 200px for the content + 40px of padding + 20px of border makes a total visible width of 260px.

You can change this by specifying border-box sizing:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

This alternative box model tells CSS to apply the width to the border box instead of the content box. This means our border and padding get pushed in, so when you set .my-box to be 200px wide, it actually renders at 200px wide.

Check out how this works in the following interactive demo. When you toggle the box-sizing value, the blue area shows which CSS is being applied inside the box.

*,
*::before,
*::after {
  box-sizing: border-box;
}

This CSS rule selects every element in the document and every ::before and ::after pseudo element and applies box-sizing: border-box. This means that every element now uses this alternative box model.

Because the alternative box model can be more predictable, developers often add this rule to resets and normalizers, like this one.

Resources

• Introduction to the box model
• What are browser developer tools?

User agent stylesheets

• Chromium
• Firefox
• Webkit