The box model

Why you need this

Every element on a page is a rectangle, even if it looks round. A product card, a button, a paragraph — they are all boxes. To control how much space they take and how far apart they stand, you need to understand the box model. It is the basis of all layout: without it you can make neither a nice button nor an even grid.

What a box is made of

From the inside out:

1. content — the content (text, a picture); its size is width and height;
2. padding — the inner spacing between the content and the border; the background extends here too;
3. border — the border;
4. margin — the outer spacing, the distance to the neighbours; it is always transparent.

An analogy: a painting in a frame. The canvas is the content, the mat is the padding, the frame is the border, and the distance to the next painting on the wall is the margin.

Sizes

.box {
  width: 300px;
  height: 100px;
  background: lightblue;
}

Result: a light blue 300×100 pixel rectangle.

Usually height isn't set — let the height fit the text, otherwise long text spills out of the block. Instead there are min-height and max-width: "no less than" and "no more than".

padding, border, margin

.button {
  padding: 10px 20px;
  border: 2px solid navy;
  margin: 15px;
  background: skyblue;
}

Result: a light blue button with a dark blue border; the text is 10px from the border at the top and bottom and 20px at the sides; there is 15px of empty space around the button.

The shorthand goes clockwise, starting from the top:

Notation	Means
padding: 10px;	all four sides 10px
padding: 10px 20px;	top/bottom 10px, left/right 20px
padding: 5px 10px 15px;	top 5, left/right 10, bottom 15
padding: 1px 2px 3px 4px;	top, right, bottom, left

The same works for margin. You can set one side: padding-left: 8px;, margin-top: 0;.

A border is written with three words: thickness, style, colour. Styles: solid, dashed, dotted, double.

Rounded corners — border-radius:

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: orange;
}

Result: an orange circle — a square with a 50% radius turns into a circle.

Centring a block

A block with a set width can be centred by giving all the free space equally to the left and right:

.container {
  width: 600px;
  margin: 0 auto;
}

Result: a 600px column exactly in the middle of the page. auto means "share the free space".

box-sizing

A catch: by default width is the width of the content only. Padding and the border are added on top:

.a { width: 200px; padding: 20px; border: 5px solid; }

Result: on screen the block is 200 + 20·2 + 5·2 = 250px wide.

That's inconvenient, so almost every site turns on a different mode:

* {
  box-sizing: border-box;
}

Now width is the width including the padding and border. The .a block becomes exactly 200px, with 150px left for the content. The * selector means "all elements".

Margin collapsing

The vertical margins of two neighbouring blocks don't add up — they "collapse", and the larger one wins:

.first { margin-bottom: 30px; }
.second { margin-top: 20px; }

Result: there are 30px between the blocks, not 50px. Horizontal margins never do this.

How it works inside

Open the developer tools (F12) and select an element — the «Computed» tab shows a diagram of nested rectangles: orange margin, yellow border, green padding, blue content, with the numbers on every side. It's the best way to find out where extra space came from.

Common mistakes

1. A block "spills" over the edge. width: 100% plus padding is more than 100%. Fixed with box-sizing: border-box.
2. margin: auto doesn't centre. The block has no width — it's already full width, there's nothing to centre.
3. A fixed height and long text. The text spills out of the block. Remove height or use min-height.
4. Mixing up padding and margin. The block's background grows with padding but not with margin. Need more space inside a button — padding; further from the neighbours — margin.
5. A border without a style. border: 2px red; — no border appears, it needs a style: border: 2px solid red;.

Cheat sheet

Property	What it does
width, height	content size
min-height, max-width	"no less than", "no more than"
padding: 10px 20px	inner spacing (top/bottom, left/right)
border: 1px solid #ccc	border: thickness, style, colour
border-radius: 8px / 50%	rounded corners / a circle
margin: 0 auto	outer spacing / centring a block
box-sizing: border-box	width including padding and border
* { … }	a rule for all elements