The box model

Every element on a page is a rectangle, even if it does not look like one. It consists of four layers: the content (text, an image), the padding, the border and the margin. This is called the box model, and all of layout rests on it.

Padding

padding is the space between the content and the element's border. The element's background fills it too:

<style>
  .box {
    background: lavender;
    padding: 20px;
  }
</style>
 
<div class="box">The text is moved 20 pixels away from the edges.</div>

<div> is a block with no meaning of its own, a general-purpose container for styling. It shows up a lot in examples about boxes.

Border

border draws a frame around the padding. One property holds the thickness, the line style and the color:

<style>
  .box {
    padding: 12px;
    border: 2px solid rebeccapurple;
  }
</style>
 
<div class="box">A block with a solid border</div>

Line styles, rounded corners and borders on single sides are covered in the lesson on backgrounds and borders.

Margin

margin is the distance to neighboring elements. It lies outside the border and is always transparent:

<style>
  .card {
    padding: 12px;
    border: 1px solid gray;
    margin-bottom: 24px;
  }
</style>
 
<div class="card">The first card</div>
<div class="card">The second card</div>

Vertical margins of neighboring blocks do not add up — they collapse: if the upper one has margin-bottom: 24px and the lower one has margin-top: 16px, the gap between them is 24px, the larger of the two.

Individual sides

Spacing can be set on one side — padding-left, margin-top — or on all of them with a shorthand. The values go clockwise, starting from the top:

<style>
  .a { padding: 4px 32px; background: mistyrose; }
  .b { padding: 4px 8px 20px 48px; background: honeydew; }
</style>
 
<div class="a">Two values: 4 top and bottom, 32 left and right</div>
<div class="b">Four values: top, right, bottom, left</div>

Size and centering

width and height set the width and height. A block element without width takes all the available width. A block with a set width is centered with automatic margins on the left and right:

<style>
  .center {
    width: 200px;
    height: 60px;
    margin: 0 auto;
    background: lightyellow;
    text-align: center;
  }
</style>
 
<div class="center">Centered</div>

auto means "split the free space equally".

The box model in browser tools

You can see all the layers: right-click an element, choose "Inspect" and find the tab with sizes. It shows a diagram of the box with numbers for each layer — the quickest way to find out where an extra gap came from.

Common mistake

By default width is the width of the content only: padding and border are added on top, and the block ends up wider than intended. The box-sizing: border-box property includes them in the given width:

<style>
  .w { width: 200px; padding: 20px; border: 4px solid gray; margin-bottom: 8px; }
  .fixed { box-sizing: border-box; }
</style>
 
<div class="w">Wider than 200px: 248px</div>
<div class="w fixed">Exactly 200px</div>

Usually box-sizing: border-box is switched on for every element of the site with the rule * { box-sizing: border-box; }.