<p>The following article is co-authored by Uri Shaked and Michal Porag. </p>
<p>Let’s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of combinations of CSS properties, reading though the specs, and trying to figure out why some things seem to behave one way or another. </p>
<p>But before jumping in, let’s cover some basics so we’re all on the same page. </p>
<p>The basics </p>
<p>You have an element, and you want it to be 640px wide and 360px tall. These are just arbitrary numbers that conform to 16:9 pixel ratio. You can set them explicitly like this: </p>
<p>.element {<br />
width: 640px;<br />
height: 360px;<br />
} </p>
<p>Now, the design calls for some padding inside that element. So you modify the CSS: </p>
<p>.element {<br />
width: 640px;<br />
height: 360px;<br />
padding: 10px;<br />
} </p>
<p>What is the rendered width and height of the element now? I bet you can guess… it’s not 640×360px anymore! It’s actually 660×380px, because the padding adds 10px to each side (i.e. top, right, bottom and left), for an additional 20px on both the height and width. </p>
<p>This has to do with the box-sizing property: if it’s set to content-box (the default value), the rendered size of the element is the width and height plus the padding and border. That might mean that the rendered size is bigger than we intend which is funny because it might wind up that an element’s declared width and height values are completely different than what’s rendered. </p>
<p>That’s the power of The CSS Box Model. It calculates width and height like so: </p>
<p>/* Width */<br />
width + padding-left + padding-right + border-left + border-right </p>
<p>/* Height */<br />
height + padding-top + padding-bottom + border-top + border-bottom </p>
<p>What we just saw is how the dimensions for a block element are computed. Block elements include any element that naturally takes up the full width that’s available. So, by nature, it doesn’t matter how much content the element contains because its width is always 100%, that is, until we alter it. Think of elements like , , , , and so many more. </p>
<p>But now we ought to look at inline elements because they behave differently when it comes to The Box Model and how their dimensions are computed. After that, we’ll look at the relationship between parent and child elements, and how they affect the width and height computations of each other. </p>
<p>The curious case of inline elements </p>
<p>As we just saw, the padding and border of any element are both included in the element’s computed width and height dimensions. Funny enough, there are cases where the width and height properties have no effect whatsoever. Such is the case when working with inline elements. </p>
<p>An inline element is an element that’s width and height are determined by the content it contains. Inline elements, such as a , will completely ignore the width and height as well the the left and right margin properties because, well, the content is what determines the dimensions. Here, sometimes a visual can help. </p>
<p>CodePen Embed Fallback </p>
<p>Just look at how nesting a block element inside of an inline element breaks the inline element’s shape simply because the block element is not defined by the amount of content it contains, but rather the amount of available space. You can really see that in action when we add a border to the inline element. Look how the inline element abruptly stops where the paragraph comes in, then continues after the paragraph. </p>
<p>CodePen Embed Fallback </p>
<p>The span sees the paragraph, which interrupts the inline flow of the span and essentially breaks out of it. Fascinating stuff! </p>
<p>But there’s more! Look how the inline element completely overlooks width and margin, even when those are declared right on it. </p>
<p>CodePen Embed Fallback </p>
<p>Crazy! </p>
<p>Parent and child elements </p>
<p>The parent-child relationship is a common pattern. A parent element is one that contains other elements nested inside it. And those nested elements are the parent element’s children.</p>
