Box Model

The Box Model

Every element on a page is a rectangular box. The box model describes the four layers of that box, from the inside out:

Layer	What it is
Content	The text, image or child elements.
Padding	Space between the content and the border. Takes the background colour.
Border	A line around the padding.
Margin	Space outside the border, pushing other elements away. Always transparent.

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 16px;
}

By default, width only sets the content width. So this box is actually 300 + 20×2 + 2×2 = 344px wide on screen. That surprises everybody.