Box CSS

I am a paragraph of text that has a few words in it.

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

The content would break out of your element and it would be 142px wide, rather than 100px. Why is that? The box model is a core foundation of CSS and understanding how it works, how it is affected by other aspects of CSS and importantly, how you can control it will help you to write more predictable CSS

A really important thing to remember when writing CSS, or working on the web as a whole, is that everything displayed by CSS is a box. Whether that's a box that uses border-radius to look like a circle, or even just some text: the key thing to remember is that it's all boxes.

Content and sizing #27 

Boxes have different behavior based on their WALLALL Knowledge Base , their set dimensions, and the content that lives within them. This content could be even more boxes—generated by child elements—or plain text content. Either way, this content will affect the size of the box by default.

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

Let's quickly look at the difference, using a demo to help us.

<main>

  <div class="wrapper">

    <article class="flow">

      <h1>Extrinsic sizing vs intrinsic sizing</h1>

      <figure class="callout">

        <p>

          Notice that when the box is using <strong>extrinsic sizing</strong>, there’s WALLALL Knowledge Base        a limit of how much content you can add before it overflows out of the box’s

          bounds. This makes the word, “awesome”, overflow.

        </p>

      </figure>

      <label class="toggle" for="intrinsic-switch">

        <span class="toggle__label">Turn on intrinsic sizing</span>

        <input type="checkbox" role="switch" class="toggle__element" id="intrinsic-switch" />

        <div class="toggle__decor" aria-hidden="true">

          <div class="toggle__thumb"></div>

        </div>

      </label>

      <p class="awesome" data-element="awesome">CSS is awesome</p>

    </article>

  </div>

</main>

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

Let's look at something more complex to see the impact of different sizing on real content:

You start with content box, which is the area that the content lives in. As you learned before: this content can control the size of its parent, so 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 background of the box will be visible in the space that it creates. If our box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars will occupy this space too.

<article dir="ltr">

  <figure id="box_model">

    Content Box

    <span class="vertical scrollbar"></span>

    <span class="horizontal scrollbar"></span>

  </figure>

</article>

<form action="">

  <label for="show_scrollbars">Show scrollbars?</label>

  <input id="show_scrollbars" type="checkbox">

  

  <label for="inline_scrollbars">Inline scrollbars?</label>

  <input id="inline_scrollbars" type="checkbox">

</form>

Learn CSS!

• Learn
• Learn CSS!

• 000Learn CSS
• 001Box Model
• 002Selectors
• 003The cascade
• 004Specificity
• 005Inheritance
• 006Color
• 007Sizing Units
• 008Layout
• 009Flexbox
• 010Grid
• 011Logical Properties
• 012Spacing
• 013Pseudo-elements
• 014Pseudo-classes
• 015Borders
• 016Shadows
• 017Focus
• 018Z-index and stacking contexts
• 019Functions
• 020Gradients
• 021Animations
• 022Filters
• 023Blend Modes
• 024Lists
• 025Transitions
• 026Overflow
• 027Backgrounds
• 028Text and typography
• 029Conclusion and next steps

001

Box Model

Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

On this page

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 would break out of your element and it would be 142px wide, rather than 100px. Why is that? The box model is a core foundation of CSS and understanding how it works, how it is affected by other aspects of CSS and importantly, how you can control it will help you to write more predictable CSS.

A really important thing to remember when writing CSS, or working on the web as a whole, is that everything displayed by CSS is a box. Whether that's a box that uses border-radius to look like a circle, or even just some text: the key thing to remember is that it's all boxes.

Content and sizing #

Boxes have different behavior based on their display value, their set dimensions, and the content that lives within them. This content could be even more boxes—generated by child elements—or plain text content. Either way, this content will affect the size of the box by default.

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

Let's quickly look at the difference, using a demo to help us.

Owesome

Notice that when the box is using extrinsic sizing, there's a limit of how much content you can add before it overflows out of the box's bounds. This makes the word, "awesome", overflow.

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

Let's look at something more complex to see the impact of different sizing on real content:

Toggle intrinsic sizing on and off to see how you can gain more control with extrinsic sizing and let the content have more control with intrinsic sizing. To see the effect that intrinsic and extrinsic sizing has, add a few sentences of content to the card. When this element is using extrinsic sizing, there's a limit of how much content you can add before it overflows out of the element's bounds, but this isn't the case when intrinsic sizing is toggled on.

By default, this element has a set width and height—both 400px. These dimensions give strict bounds to everything inside the element, which will be honored unless the content is too large for the box in which case visible overflow will happen. You can see this in action by changing the content of the caption, under the flower picture to something that exceeds the height of the box, which is a few lines of content.

Key Term

When content is too big for the box it is in, we call this overflow. You can manage how an element handles overflow content, using the overflow property.

When you switch to intrinsic sizing, you are letting the browser make decisions for you, based on the box's content size. It's much more difficult for there to be overflow with intrinsic sizing because our box will resize with its content, rather than try to size the content. It's important to remember that this is the default, flexible behavior of a browser. Though extrinsic sizing gives more control on the surface, intrinsic sizing provides the most flexibility, most of the time.

The areas of the box model #

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

The four main areas of the box model: content box, padding box, border box and margin box.

You start with content box, which is the area that the content lives in. As you learned before: this content can control the size of its parent, so 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 background of the box will be visible in the space that it creates. If our box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars will occupy this space too.

The border box surrounds the padding box and its space is occupied by the border value. The border box is the bounds of your box and the border edge is the limit of what you can visually see. The border property is used to visually frame an element.

width 200 px

margin box, is the space around your box, defined by the margin rule on your box. Properties such as outline and box-shadow occupy this space too because they are painted on top, so they don't affect the size of our box. You could have an outline-width of 200px on our box and everything inside and including the border box would be exactly the same size.