CSS: Box Model
Every element on the page is a box: learn how that box works.
Content, Padding, Border, Margin
Every HTML element is rendered as a rectangular box with four layers around its content. Understanding each layer is essential for controlling layout and spacing.
The Four Box Layers
Each element is surrounded by four layers. They are applied from the inside out: content, padding, border, margin.
- Content, the actual text or image; sized by width and height
- Padding, space between the content and the border; has the element's background color
- Border, a visible (or invisible) line around the padding
- Margin, transparent space outside the border; separates elements from each other
Box Model Layers
Content, padding, border, and margin all visible.
.box {
width: 200px;
padding: 20px;
border: 4px solid steelblue;
margin: 24px;
background: lightcyan;
font-family: Arial, sans-serif;
}box-sizing: border-box vs content-box
By default, width only sets the size of the content area. Padding and border are added on top, making the element larger than expected. border-box changes this so width includes padding and border.
box-sizing
border-box is the modern standard. Setting it on every element with * { box-sizing: border-box; } prevents layout surprises caused by padding and border expanding an element's size.
- content-box, default; width = content only. Total = width + padding + border
- border-box, width = content + padding + border. Total = width
- Use * { box-sizing: border-box; } as your universal reset
- border-box makes it much easier to build predictable grid layouts
box-sizing Comparison
Both have width: 200px, but border-box stays exactly 200px wide.
/* Default: total width = 200 + 20 + 20 + 4 + 4 = 248px */
.content-box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid crimson;
background: #fee2e2;
margin-bottom: 12px;
}
/* Total width stays exactly 200px */
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid green;
background: #dcfce7;
}Margin Collapsing
When two vertical margins of adjacent block elements touch, they collapse into a single margin equal to the larger of the two. This only happens with vertical margins. Horizontal margins never collapse.
Margin Collapsing
Margin collapsing is a feature, not a bug. It prevents double spacing between elements. But it can be surprising when margins don't add up as expected.
- margin-bottom: 24px on one element + margin-top: 16px on the next = 24px gap (not 40px)
- Collapsing only happens vertically, left/right margins always add up normally
- Prevent collapsing, add padding, border, or overflow: hidden to the parent
- Flexbox and Grid children do not collapse margins
Margin Collapsing
The larger margin wins, they do not add together.
.box-a {
margin-bottom: 30px;
background: #fef9c3;
padding: 12px;
border: 1px solid #ca8a04;
}
.box-b {
margin-top: 20px;
background: #dbeafe;
padding: 12px;
border: 1px solid steelblue;
}Padding vs Margin Use Cases
Both padding and margin add space, but they serve different purposes and behave differently with backgrounds, borders, and click areas.
Padding vs Margin
Use padding when you want space inside an element (background and click area extend with it). Use margin when you want space outside to separate it from other elements.
- Padding, space inside; background color fills it; increases clickable area
- Margin, space outside; always transparent; separates elements
- Use padding for button inner spacing, card inner spacing
- Use margin to control gap between cards, sections, and paragraphs
- margin: auto centers a block element horizontally
Padding vs Margin
Padding controls inner space; margin controls outer separation.
/* Padding for inner spacing, background fills it */
.btn {
padding: 10px 24px;
background: steelblue;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* Margin for outer separation */
.card {
margin: 24px auto;
padding: 20px;
border: 1px solid #ddd;
max-width: 300px;
}Box Model Debugging
The browser DevTools Elements panel shows a visual diagram of an element's content, padding, border, and margin. It is the fastest way to debug unexpected spacing and sizing.
DevTools Box Model
In Chrome or Firefox DevTools, select any element and scroll to the bottom of the Styles panel to see the box model diagram with exact pixel values for each layer.
- Open DevTools with F12, click the Elements tab, select an element
- The computed box model shows exact content/padding/border/margin values
- Hover each layer in the diagram to highlight it on the page
- Quick debug trick, add outline: 2px solid red to any element to see its box without affecting layout
Box Model Debugging
Use outline to visualise element boundaries without changing layout.
/* outline does not affect layout, safe for debugging */
.debug-box {
outline: 2px solid red;
padding: 20px;
}
.inner {
outline: 2px solid blue;
}Overflow
When content is larger than its container, the overflow property controls what happens to the content that does not fit.
overflow
The overflow property handles content that is too large for its box. It applies to both axes unless overridden with overflow-x or overflow-y.
- visible, default; content spills outside the box
- hidden, content is clipped; nothing outside the box is shown
- scroll, always shows scrollbars, even when content fits
- auto, shows scrollbars only when content overflows (recommended)
overflow Values
hidden clips content; auto adds scrollbars only when needed.
.box {
width: 250px;
height: 60px;
border: 1px solid #ccc;
padding: 8px;
margin-bottom: 12px;
font-size: 14px;
}
.hidden { overflow: hidden; }
.auto { overflow: auto; }overflow-x and overflow-y
overflow-x and overflow-y let you control horizontal and vertical overflow independently.
overflow-x / overflow-y
Setting overflow-x and overflow-y separately gives you fine control, for example allowing vertical scroll while clipping horizontal overflow.
- overflow-x: auto, horizontal scrollbar only when content is wider than container
- overflow-y: scroll, always show vertical scrollbar
- overflow-x: hidden, clips horizontal overflow; common for preventing side-scroll on mobile
- Setting overflow: hidden on both axes also creates a new block formatting context
overflow-x
Horizontal scroll only, vertical overflow is hidden.
.scroll-x {
width: 300px;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #ccc;
padding: 8px;
}text-overflow: ellipsis
When a single line of text is too long for its container, text-overflow: ellipsis replaces the clipped portion with …. It requires three properties to work together.
text-overflow: ellipsis
To show '...' on overflow you need all three properties: white-space: nowrap prevents wrapping, overflow: hidden clips the text, and text-overflow: ellipsis adds the dots.
- white-space: nowrap, keeps the text on a single line
- overflow: hidden, clips the text that goes outside the container
- text-overflow: ellipsis, replaces the clipped part with ...
- The container must have a defined width for ellipsis to work
text-overflow: ellipsis
Long text clipped with ..., all three properties are required.
.truncate {
width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc;
padding: 8px;
}Knowledge Check
1. In the CSS box model, which layer is closest to the content?
2. With box-sizing: border-box, what does the width property include?
3. What is margin collapsing?
4. Which overflow value shows scrollbars only when content overflows?
5. Which CSS property adds '...' when text is clipped?