CSS Box Model

In CSS, every element is a rectangular box, and the box model describes the layers of that box.

The Four Layers

From the inside to the outside, every box has:

1. Content: the text, image or other things inside
2. Padding: clear space around the content
3. Border: a line around the padding
4. Margin: clear space outside the border, separating it from other boxes

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #264de4;
  margin: 25px;
  background-color: #e7ecff;
}
</style>
</head>
<body>

<div class="box">Content area. The light blue covers the content and the padding. The margin is the empty space outside the blue border.</div>

</body>
</html>

Width and Height

width and height set the size of the box. You can use pixels (px), percentages (%) of the parent, or other units.

.photo-frame {
  width: 50%;
  height: 200px;
}

max-width stops a box from getting wider than a limit. It is very useful for text and images on large screens:

.article {
  max-width: 700px;
}

Working Out the Total Size

By default, width is the width of the content only. Padding and border are added on top. For the box above:

So a box with width: 200px actually takes 250px of the screen, plus its margin. This surprises many beginners.

box-sizing: border-box

With box-sizing: border-box, the width includes the padding and border. A box with width: 200px is then exactly 200px wide, and the content gets smaller to make room.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin-bottom: 10px;
}
.normal {
  box-sizing: content-box;
  background-color: #ffe0e0;
}
.border-box {
  box-sizing: border-box;
  background-color: #e0ffe6;
}
</style>
</head>
<body>

<div class="normal">content-box: 250px wide</div>
<div class="border-box">border-box: 200px wide</div>

</body>
</html>

Most developers turn this on for every element at the start of their CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

Now sizes are much easier to plan. If you want two boxes side by side at 50% each, padding will no longer push the second box onto a new line.

Overflow

If the content is bigger than the box, it spills out. The overflow property decides what happens:

Exercise