CSS Box Model

Every HTML element is rendered as a rectangular box. The CSS box model describes the layers that make up each box, from the inside out:

• Content — the actual text, image, or child elements
• Padding — transparent space between content and border
• Border — a visible edge around the padding
• Margin — transparent space outside the border, separating the element from neighbors

Here is the classic box model diagram:

Use the sliders below to adjust each layer. Watch the diagram and computed dimensions update in real time.

Padding and margin can be set independently for each side. Adjust the values below and watch how asymmetric spacing affects the box.

The box-sizing property changes how the browser calculates width and height:

• content-box (default): width applies only to the content area. Padding and border are added outside.
• border-box: width includes content + padding + border. The content area shrinks to accommodate.

Vertical margins collapse: when two block elements stack vertically, the gap between them is the larger of the two margins, not the sum.

• Only vertical (top/bottom) margins collapse, never horizontal
• Only happens between block-level elements in normal flow
• Does not happen with flexbox, grid, floats, or absolutely positioned elements
• Padding or borders between elements prevent collapsing