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:

Key terms:

• Total width = margin-left + border-left + padding-left + content width + padding-right + border-right + margin-right
• Total height follows the same pattern vertically
• The box-sizing property changes how width and height are calculated

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

1. An element has width: 200px; padding: 20px; border: 5px solid; with default box-sizing. What is the total rendered width?

2. What happens when two vertically adjacent elements have margin-bottom: 30px and margin-top: 20px?

3. With box-sizing: border-box and width: 200px; padding: 20px; border: 5px solid;, what is the content area width?