The box model

Give a box width: 200px, 16px of padding and a 2px border, and by default it takes up 236 pixels across the screen, not 200.

Every element is a box

To lay out a page, the browser turns every element into a rectangle. Each box has four layers, from the inside out. The content area holds the text or image. Padding is space inside the box, between the content and the border, and it takes the box's background colour. The border is a line around the padding. Margin is space outside the border that pushes other boxes away; it is always transparent. The browser developer tools draw exactly this diagram when you inspect an element, with the numbers filled in.

Shorthand for four sides

padding, margin and border-width take one to four values, going clockwise from the top. padding: 16px sets all four sides. padding: 8px 16px sets top and bottom to 8 and left and right to 16. padding: 4px 8px 12px 16px sets top, right, bottom and left in that order. Each side can also be set on its own, as in margin-top. border: 2px solid #333 sets width, style and colour together; without a style such as solid or dashed no border is drawn at all.

box-sizing: the setting almost everyone changes

By default, width and height set the size of the content area only, and padding and border are added on top. That is the content-box model, and it makes layouts awkward: two boxes of width: 50% with any padding no longer fit side by side. With box-sizing: border-box, the width includes the padding and border, and the content area shrinks to make room. Many stylesheets start by applying it to every element with *, *::before, *::after { box-sizing: border-box; }.

Block and inline boxes

Boxes behave differently depending on their display value. Block boxes, such as p, h1 and section, start on a new line and stretch to fill the width of their container. Inline boxes, such as a, strong and span, sit inside a line of text; width and height do not apply to them, and their vertical padding and margin do not push other lines away. display: inline-block is in between: the box flows inside the line like a word but respects width, height and padding, which suits small labels and buttons.

Margins that collapse

One rule surprises nearly everyone. When the bottom margin of one block meets the top margin of the next, they do not add up; the larger one wins. A paragraph with margin-bottom: 20px followed by a heading with margin-top: 30px ends up 30 pixels away, not 50. This is called margin collapsing, and it only happens to vertical margins between blocks in normal flow, not inside flex or grid containers. To centre a block horizontally, give it a width or max-width and margin: 0 auto: the two automatic side margins share the free space equally.