CSS Box Model

You set a card's width to 300px, add inner spacing and a border - and suddenly the card sticks out of its column. Nothing is broken: that's how the CSS box model works, and once you understand it, such surprises stop.

In the context of HTML, every element can be treated like a box, similar to a package we send by mail. Let's analyze this using a package example:

Package dimensions: each box has specific dimensions, such as height (the height property) and width (the width property).

Package border: a box can have a border, for example decorative paper, which corresponds to the border property in CSS.

Distance between packages: since we don't always know what's in a parcel, the package must keep a certain margin from other parcels, which in CSS corresponds to the margin property.

Space inside the package: we can't pack an item larger than the package itself, so we need to leave some space inside the box, known as padding.

In Egypt, a sarcophagus has the same structure: the mummy inside, padding around it, then golden walls, and free space between the sarcophagi in the tomb.

The Four Layers of a Box

We interpret each element on the page as a box that has its own dimensions and four layers, nested one inside another. Here is a diagram, from the outer layer to the center:

+-------------------------------------------+
| margin                                    |
|   +-----------------------------------+   |
|   | border                            |   |
|   |   +---------------------------+   |   |
|   |   | padding                   |   |   |
|   |   |   +-------------------+   |   |   |
|   |   |   |      content      |   |   |   |
|   |   |   +-------------------+   |   |   |
|   |   +---------------------------+   |   |
|   +-----------------------------------+   |
+-------------------------------------------+

Content is the element's content, for example text. Padding is the space between the content and the border, the border is the frame itself, and the margin is the outer space separating the element from its neighbors. An element's background fills the content, the padding and the area under the border, but never reaches the margin - the margin is always transparent.

Remember that elements have dimensions even when we don't declare them. Also remember not to set height and width on all elements - this is a common mistake made by people who are just starting their adventure with styles. A block element without a set width takes up all the available width by itself, and a fixed height will make longer text spill out of the box.

Border

Border is simply the border of an element. It can be, for example, a one-pixel outline of a card on a web page. You usually write it as a shorthand, giving the width, style and color on one line:

.card {
  border: 1px solid gold;
}

In the example, the order is width (1px), style (solid, a continuous line) and color (gold) - the browser also accepts them in a different order, but this one is the most common. Besides solid you'll meet dashed, dotted and double. Without a style the border won't appear at all, because its default value is none. You add rounded corners with a separate property, e.g. border-radius: 10px.

Margin and Padding

Margin is used to create spacing between elements, and padding to create spacing inside a given element. An example could be a card where the text is 20px away from the section boundaries, while the card itself keeps a 15px distance from its neighbors:

.card {
  padding: 20px;
  margin: 15px;
}

A single value sets the spacing on all four sides at once. You can also set each side separately: margin-top, margin-right, margin-bottom and margin-left - padding-top, padding-right, padding-bottom and padding-left work the same way. In the shorthand with four values, the order runs clockwise, starting from the top:

.card {
  margin: 10px 20px 30px 40px;
}

This card has a 10px margin at the top, 20px on the right, 30px at the bottom and 40px on the left. The padding shorthand works the same way, and two values, e.g. padding: 10px 20px, mean: 10px at the top and bottom, and 20px on the sides.

How Much Space Does the Box Really Take?

Let's go back to the problem from the beginning of the lesson. By default, width sets the width of the content alone, and padding and border are added to it on both sides:

.sarcophagus {
  width: 200px;
  padding: 20px;
}

This element will take 240px of width on the screen: 200px of content plus 20px of padding on the left and on the right. If it also had a 5px border, another 10px would be added. The margin doesn't enlarge the box, but it pushes the neighbors away. If you'd rather have width mean the whole box, including padding and border, add one declaration:

.sarcophagus {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
}

Now the element is exactly 200px wide, and 160px is left for the content - the padding fit inside the given width instead of enlarging it. Many projects set box-sizing: border-box on all elements, and I recommend it because calculating sizes becomes much simpler.

Practice

In the editor below you'll compare two 300px-wide boxes with different padding, borders and margins. A comment in the CSS file calculates how much space the first one takes including margins - check it in the developer tools (F12), which show every element's box model:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Box Model</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Box Model in CSS</h1>

    <div class="box-example">
        <p>This element has width, padding, border and margin.</p>
    </div>

    <div class="box-example-2">
        <p>Compare the dimensions of this box with the previous one.</p>
    </div>

    <h2>Box Model parts:</h2>
    <ul>
        <li><strong>Content</strong> - content area (width x height)</li>
        <li><strong>Padding</strong> - inner spacing</li>
        <li><strong>Border</strong> - the frame</li>
        <li><strong>Margin</strong> - outer spacing</li>
    </ul>
</body>
</html>

In the next lesson you'll see that boxes are laid out side by side or one below another depending on the display property. Remember: every element is a sarcophagus - the mummy of content, the padding lining, the golden walls of the border and the free space of the margin.