The Box Model

Every HTML element is treated as a rectangular box, made up of four layers: content, padding, border, and margin.

The four layers

  • Content — the actual text or image inside the element.
  • Padding — space between the content and the border.
  • Border — a line drawn around the padding.
  • Margin — space outside the border, separating this element from others.

Try changing the padding, border, or margin values:

Try it yourself
Result

Shorthand values

Padding and margin accept one, two, or four values, in this order when four are given: top, right, bottom, left.

Try it yourself
Result
Note: by default, padding and border add to an element's total size. Setting box-sizing: border-box changes this so padding and border are included within the width you set, which many developers find more predictable.
PreviousColors & Backgrounds