Everything is a box
One way of thinking about HTML and web content is to think about boxes, multiple boxes surrounding your content. You can see these nested boxes in your browser's Dev Tools as shown in figure 1.  Starting from the inside, the boxes are: content box : The area that the content lives in. : If the [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) property is set to `content-box` and the element is a block element, the content area's size can be explicitly defined with the following properties: : * [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) : * [min-width](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) : * [max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) : * [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height) : * [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) : * [max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) padding box : surrounds the content box and is the space created with the padding properties: : * [padding-top](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) : * [padding-right](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) : * [padding-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) : * [padding-left](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) : * The [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) shorthand property : Since the padding is inside the box, the background of the box will be visible in the space that it creates. : If the box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars will occupy this space too. border box : The border box represents the bounds of your box and the border edge is the limit of what you can see. : You can control the borders of your content with these properties: : * [border-top](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) : * [border-right](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) : * [border-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) : * [border-right](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) : * The [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border) shorthand property margin box : is the outermost box around your content. : 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 can control margins with these properties: : * [margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) : * [margin-right](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) : * [margin-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) : * [margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) : * The [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) shorthand ## Calculating Content Size Calculating the size of the content in CSS is tricky. By default in the CSS box model, the width and height assigned to an element are applied to the element's content box and will not consider any padding or margins. Any padding or margin will be added to the content width and will make the resulting element wider than what we intended This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with `width: 25%;`, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container. I've created an explainer in Codepen to illustrate the different values The box-sizing property can be used to adjust this behavior: * **content-box** (default behavior) * If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px * **border-box** tells the browser to account for any border and padding in the values you specify for an element's width and height * If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. * `box-sizing: border-box` is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search. The following Pen explains the differences between the box-sizing values. ## Intrinsic Versus Extrinsic Sizing The next question is how CSS measures the size of a box. CSS has two ways to measure the size of content: intrinsic and extrinsic: The intrinsic size of an element is the size it would be based on its content if no external factors were applied to it. For example, when we use the following `figure` + `image` + `figcaption` combination, we rely on the size of the image as it is. The width of the `figcaption` element is 100% of the width of the parent. Since we didn't set up dimensions for the `figure`, it will take 100% of the width of the parent container. ```html
