Let's Unpack The CSS Box

Everything in HTML rendering is boxes. Everything you see on a web page can be imagined inside a box. Paragraphs of text? Boxes. Headers? Boxes. Buttons, lists, images? Boxes, boxes, boxes. These boxes are then arranged inside bigger boxes as part of your layout.

Everything is boxes!

Let that sink in, and then read on as we ruminate on the CSS Box Model. If we think of everything as boxes, then we really need to understand the properties of those boxes.

For the purposes of these examples today, we will use the ubiquitous div tag, though most other elements can be used in a pinch. I chose the div tag because it's relatively uncomplicated. The div tag adds as the content placeholder which has an orange background. For contrast, we use a paragraph tag for the content, with a beige background.

<div style="height:200px;width:200px;background-color:rgb(255,200,0)">
  <p style="background-color:rgb(255,200,100);">This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.</p>
</div>

You see that the light beige box lines up with the orange box at the top, with no spacing at the sides. The content fits the placeholder with no space to spare. That is the default.

This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.

Padding

This is a spacing that is applied on the interior of the element, causing a space between its contents and its perimeter.

<div style="height:200px;width:200px;background-color:rgb(255,200,0);padding:50px">
  <p style="background-color:rgb(255,200,100);">This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.</p>
</div>

Now you see that the light beige paragraph remains the same size, but the size of the orange box has increased! That's due to padding - the padding occurs on the interior of the div, and this has the effect of stretching the width and/or height of the div. So if the height of the div is 200 pixels and the top and bottom both have 50 pixels padding applied, then the total effective height of the orange div is now (200 + 50 + 50) = 300 pixels.

This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.

Border

This is in effect the thickness of the perimeter of an element.

<div style="height:200px;width:200px;background-color:rgb(255,200,0);border:50px solid rgb(200,100,0)">
  <p style="background-color:rgb(255,200,100);">This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.</p>
</div>

Now you see that the beige paragraph remains the same size, and the size of the orange box looks the same, but now there's a thick brown perimeter around the box. The border property is applied on the outside of the div, and this also has the effect of stretching the width and/or height of the div. So if the height of the div is 200 pixels and the top and bottom both have 50 pixels border applied, then the total effective height of the orange div is now (200 + 50 + 50) = 300 pixels.

This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.

Margin

This is the space around the perimeter of the element.

<div style="height:200px;width:200px;background-color:rgb(255,200,0);margin:50px">
  <p style="background-color:rgb(255,200,100);">This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.</p>
</div>

You can see that the size of neither the content or the container have changed, but now there's a 50 pixel space around the perimeter of the container. You could even think of it as the perimeter's perimeter! Except that the margin property is always transparent.

This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.

Putting it all together

This is probably overkill at this point, but it's still worth going into. Let's see what happens when we put them all together.

<div style="height:200px;width:200px;background-color:rgb(255,200,0);padding:50px;border:50px solid rgb(200,100,0);margin:50px">
  <p style="background-color:rgb(255,200,100);">This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.</p>
</div>

You see the empty space of 50 pixels around the box, then the 50 pixel brown border, followed by the 50 pixel margin of the orange box! The beige paragraph shows the original width of the box. So in effect, all this combines to affect the height and width of the box.

This is a wall of text used for testing the CSS Box Model. The text within should flow in accordance to the dimensions of this HTML element.

The takeaway

The CSS Box Model affects not just divs, but all HTML elements. Knowing how padding, margins and borders affect width and height can help eliminate any confusion as to why your elements are not lining up properly.

May the Force be width you!
T___T