The box model

What you will learn

• the four layers: content, padding, border, margin
• shorthand order: top, right, bottom, left
• box-sizing: border-box and why it is the sensible choice
• centring a box with margin: 0 auto

Understand the idea

To the browser every element is a rectangular box with four layers. In the middle is the content. Around it is padding, space inside the box. Then comes the border, a line around the padding. Outside is the margin, empty space that keeps other boxes away. Padding takes the background colour of the box, but margin is always transparent.

Shorthand sets all four sides together. margin: 10px 20px means 10px top and bottom and 20px left and right. With four values they go clockwise: top, right, bottom, left (margin: 1px 2px 3px 4px). The same works for padding. A border needs a width, a style and a colour: border: 2px solid navy;.

A trap: by default width is the width of the content only, so padding and border make the box wider than you asked. box-sizing: border-box changes that so width includes the padding and border, which makes sizes predictable. Many developers set it on every element.

To centre a box horizontally give it a width and set margin: 0 auto. The two automatic side margins share the leftover space equally.

Example

.card {
  box-sizing: border-box;
  width: 240px;
  padding: 16px;
  border: 3px solid royalblue;
  margin: 12px auto;
}

Your turn: code to type and practise

Style .card: give it a width, some padding, a border, a margin of 12px auto, and box-sizing: border-box.

← Combinators, pseudo-classes and pseudo-elementsDisplay and position →