I am a paragraph of text that has a few words in it.
``` Then you write this CSS for it: ```css 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. Understanding the box model of CSS will help you figure out why your content doesn't fit inside an element. 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: When the box has extrinsic sizing, there's a limit to how much content you can add before it overflows out of the box. This makes the word "awesome" overflow. 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: Extrinsic sizing lets you control the size of an element. Intrinsic sizing prevents text overflow. 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 four main areas of the box model: content box, padding box, border box and margin box. 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`](https://developer.mozilla.org/docs/Web/CSS/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. Scroll bars live in the padding box. The **border box** surrounds the padding box, and its space is defined by the [`border`](https://developer.mozilla.org/docs/Web/CSS/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`](https://developer.mozilla.org/docs/Web/CSS/outline) and [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/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 wide outline doesn't affect the size of the rest of the element. ## 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 developer tools 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. To try this in Chrome: 1. [Open DevTools](https://developer.chrome.com/docs/devtools/open). 2. [Select an element](https://developer.chrome.com/docs/devtools/css/reference#select). 3. Show the box model debugger. The box model debugger for the soutline demo. ## 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. The style sheet defines how elements should look and behave, if the elements aren't given defined CSS. The CSS in user agent style sheets varies by browser, but every browser has defaults that make content easier to read. The user agent style sheet sets the default value for elements that take `display`. For example, a `