The Box Model & box-sizing

The **content area** is the innermost rectangle: where text and child elements live. Its dimensions are set by width and height.

**Padding** is transparent space between the content and the border. It inherits the element's background. **Border** is a line (with its own color, style, and width) drawn outside the padding. **Margin** is transparent space outside the border, separating the element from its neighbors. Margins do not take the element's background.

In the default box-sizing: content-box model, the width and height you set apply to the content area alone. Total rendered width = width + padding-left + padding-right + border-left + border-right. This makes arithmetic painful.

With border-box, width includes padding and border. If you set width: 300px; padding: 20px; border: 2px solid, the element is still exactly 300px wide. The content area shrinks to 256px to accommodate padding and border.

This is why nearly every modern CSS reset (and Tailwind) applies *, *::before, *::after { box-sizing: border-box; } globally. You almost never want content-box on anything that has both padding and a fixed width.

Set padding and margin individually (padding-top, margin-left) or with shorthand. Shorthand accepts 1-4 values: padding: 8px (all sides), padding: 8px 16px (top/bottom, left/right), padding: 8px 16px 4px 12px (top, right, bottom, left, clockwise from top).

Use box-sizing: border-box via a global reset. Then width: 100% means the full parent width including padding, exactly as you would expect.

**Margin collapse:** when two block elements stack vertically, their adjacent margins collapse into one (the larger of the two). This does not happen in flex or grid containers, or when there is padding or border between parent and child.

**Outline** is similar to border but draws outside the element without affecting layout. It does not participate in the box model and will not push other elements around. Use it freely for focus rings.