CSS Box Model
The content box is the innermost part of every element. It holds the actual content — text, images, or child elements. The width and height properties control the content box size, but only when box-sizing is set to content-box (the default).
In the default content-box model, the width property applies exclusively to the content area. Padding, border, and margin are added on top of the declared width, which can lead to unexpected overflow.
| 1 | /* Content box: width = content area only */ |
| 2 | .content-box-example { |
| 3 | box-sizing: content-box; /* default behavior */ |
| 4 | width: 200px; |
| 5 | padding: 20px; |
| 6 | border: 2px solid #00FF41; |
| 7 | margin: 10px; |
| 8 | /* Visual width = 200 + 40 (padding) + 4 (border) = 244px */ |
| 9 | /* Total space = 244 + 20 (margin) = 264px */ |
| 10 | } |
| 11 | |
| 12 | /* The content area is where text and children live */ |
| 13 | .content-area { |
| 14 | width: 300px; |
| 15 | height: 100px; |
| 16 | /* Text inside will wrap at 300px */ |
| 17 | /* If content overflows 100px height, it spills out */ |
| 18 | } |
Padding is the space between the content area and the border. It creates breathing room inside the element. Padding is transparent — it takes the element's background color or image. Padding does not collapse (unlike margin) and is always additive.
| 1 | /* Padding creates inner spacing */ |
| 2 | .card { |
| 3 | background: #0D0D0D; |
| 4 | padding: 24px; /* equal padding on all sides */ |
| 5 | } |
| 6 | |
| 7 | .card-compact { |
| 8 | padding: 12px 16px; /* vertical | horizontal */ |
| 9 | } |
| 10 | |
| 11 | .card-custom { |
| 12 | padding-top: 24px; |
| 13 | padding-right: 16px; |
| 14 | padding-bottom: 24px; |
| 15 | padding-left: 16px; |
| 16 | } |
| 17 | |
| 18 | /* Padding uses the element's background */ |
| 19 | .padded-element { |
| 20 | background: linear-gradient(135deg, #0D0D0D, #1A1A2E); |
| 21 | padding: 32px; |
| 22 | /* The gradient extends through the padding area */ |
| 23 | /* Only stops at the border edge */ |
| 24 | } |
The border box wraps the content and padding areas. The border is drawn on top of the padding edge and can be styled with color, thickness, and patterns. Unlike padding, borders are visible by default (unless style is none).
| 1 | /* Border sits between padding and margin */ |
| 2 | .bordered-element { |
| 3 | border: 2px solid #00FF41; |
| 4 | /* Border adds to the visual size in content-box model */ |
| 5 | } |
| 6 | |
| 7 | /* Individual border properties */ |
| 8 | .custom-border { |
| 9 | border-width: 1px 2px 3px 4px; /* top right bottom left */ |
| 10 | border-style: solid dashed dotted double; |
| 11 | border-color: #00FF41 #333 #00FF41 #333; |
| 12 | } |
| 13 | |
| 14 | /* Border radius rounds the corners */ |
| 15 | .rounded-element { |
| 16 | border: 1px solid #00FF41; |
| 17 | border-radius: 8px; |
| 18 | } |
| 19 | |
| 20 | /* Border radius on specific corners */ |
| 21 | .asymmetric-border { |
| 22 | border-radius: 8px 0 8px 0; |
| 23 | } |
Margin is the outermost space around an element. It creates gaps between elements and is always transparent. Margins do not have a background and do not participate in click events. Margins can be negative, which pulls elements closer together or overlaps them.
| 1 | /* Margin creates external spacing */ |
| 2 | .spaced-element { |
| 3 | margin-bottom: 24px; /* space below this element */ |
| 4 | } |
| 5 | |
| 6 | /* Margin shorthand follows clock order */ |
| 7 | .margin-example { |
| 8 | margin: 12px; /* all four sides */ |
| 9 | margin: 12px 24px; /* vertical | horizontal */ |
| 10 | margin: 12px 24px 12px; /* top | horizontal | bottom */ |
| 11 | margin: 12px 24px 12px 24px; /* top right bottom left */ |
| 12 | } |
| 13 | |
| 14 | /* Negative margins */ |
| 15 | .overlap-element { |
| 16 | margin-top: -20px; /* pulls element upward, can overlap previous */ |
| 17 | } |
| 18 | |
| 19 | /* Auto margins — center block elements */ |
| 20 | .center-block { |
| 21 | width: 300px; |
| 22 | margin-left: auto; |
| 23 | margin-right: auto; |
| 24 | /* Horizontally centers the block within its parent */ |
| 25 | } |
| 26 | |
| 27 | /* Margin is transparent — shows parent background */ |
| 28 | .transparent-margin { |
| 29 | margin: 32px; |
| 30 | background: #1A1A2E; |
| 31 | /* The 32px gap shows whatever is behind this element */ |
| 32 | } |
The box-sizing property fundamentally changes how width and height are calculated. It is the most impactful CSS property for layout predictability.
| box-sizing | width Includes | Total Width | Use Case |
|---|---|---|---|
| content-box | Content only | width + padding + border + margin | Legacy / CSS spec default |
| border-box | Content + padding + border | width + margin | Modern / recommended default |
| 1 | /* The universal reset — apply to everything */ |
| 2 | *, *::before, *::after { |
| 3 | box-sizing: border-box; |
| 4 | } |
| 5 | |
| 6 | /* Without this, adding padding breaks layout widths */ |
| 7 | .content-box { |
| 8 | box-sizing: content-box; |
| 9 | width: 300px; |
| 10 | padding: 20px; |
| 11 | border: 2px solid #00FF41; |
| 12 | /* actual rendered width = 300 + 40 + 4 = 344px */ |
| 13 | } |
| 14 | |
| 15 | .border-box { |
| 16 | box-sizing: border-box; |
| 17 | width: 300px; |
| 18 | padding: 20px; |
| 19 | border: 2px solid #00FF41; |
| 20 | /* actual rendered width = 300px */ |
| 21 | /* content area = 300 - 40 - 4 = 256px */ |
| 22 | } |
| 23 | |
| 24 | /* Grid/flex children with border-box make math much simpler */ |
| 25 | .grid-item { |
| 26 | box-sizing: border-box; |
| 27 | width: 50%; /* half the grid */ |
| 28 | padding: 16px; /* doesn't break the 50% calculation */ |
| 29 | } |
Vertical margins between adjacent block-level elements collapse into a single margin equal to the larger of the two. This is a feature, not a bug — it prevents excessive spacing between elements.
Margin collapse only applies to vertical margins (margin-top and margin-bottom) in the same block formatting context. Flex and Grid items do NOT collapse margins. Elements with overflow: hidden also prevent collapse.
| 1 | /* Margin collapse: adjacent vertical margins merge */ |
| 2 | .box-a { margin-bottom: 40px; } |
| 3 | .box-b { margin-top: 30px; } |
| 4 | /* Gap between box-a and box-b = 40px (not 70px) */ |
| 5 | |
| 6 | /* Parent-child margin collapse */ |
| 7 | .parent { |
| 8 | margin-top: 0; |
| 9 | } |
| 10 | .child { |
| 11 | margin-top: 24px; |
| 12 | /* The 24px margin appears to push the parent down */ |
| 13 | /* This is margin collapsing through the parent */ |
| 14 | } |
| 15 | |
| 16 | /* Preventing margin collapse */ |
| 17 | .parent-no-collapse { |
| 18 | overflow: auto; /* creates new BFC, prevents collapse */ |
| 19 | padding-top: 1px; /* tiny padding also prevents collapse */ |
| 20 | border-top: 1px solid transparent; /* border also prevents collapse */ |
| 21 | } |
| 22 | |
| 23 | /* Elements that never collapse margins: */ |
| 24 | /* - Flex items */ |
| 25 | /* - Grid items */ |
| 26 | /* - Absolutely positioned elements */ |
| 27 | /* - Inline-block elements */ |
| 28 | /* - Elements with overflow != visible */ |
| 29 | /* - Elements with float != none */ |
The box model is the most common source of layout bugs. Here are essential techniques for debugging box model issues in the browser.
Open DevTools (F12), inspect an element, and check the "Computed" tab. The box model diagram shows content, padding, border, and margin values visually.
Add a temporary outline to every element to visualize their boxes.
| 1 | /* Debug all elements */ |
| 2 | .debug * { |
| 3 | outline: 1px solid rgba(0, 255, 65, 0.3) !important; |
| 4 | background: rgba(0, 255, 65, 0.02) !important; |
| 5 | } |
| 6 | |
| 7 | /* Debug a specific element */ |
| 8 | .debug-element { |
| 9 | outline: 2px dashed #EF4444 !important; |
| 10 | } |
Add overflow: hidden or outline: 1px solid red to parent elements to see if children are overflowing. If they are, you likely have a box-sizing issue.
If you use border-box, ensure it's applied universally. A third-party component or inline style might reset it to content-box.
best practice