HTML and CSS Box Model
HTML & CSS: Box Model
Every element on the page is a rectangular box.
Understanding the box model helps you control spacing, borders, and layout with precision.
The four layers
- Content - text or media inside the element.
- Padding - space between content and border; inherits background.
- Border - stroke around padding and content.
- Margin - outer spacing that separates the element from neighbors.
Note: Remember: content sits in the middle, padding surrounds it, the border wraps both, and the margin is the outside buffer.
If you want to read more about CSS Box Model or get an in-depth understanding, go to CSS Box Model in our CSS tutorial.
Default vs. alternate sizing
By default (box-sizing: content-box), width and height apply to content only.
Switching to border-box includes padding and border in the declared size, making layout math easier.
Note: With border-box, a 300px wide box stays 300px even after you add padding and border.
Switch to border-box
* {
box-sizing: border-box;
}
.card {
width: 320px;
padding: 24px;
border: 2px solid #cbd5f5;
margin-bottom: 24px;
}
.callout {
margin: 32px 0;
padding: 16px;
border-left: 6px solid #2563eb;
background: #eff6ff;
}
Learn more: CSS box-sizing.
Visualizing with DevTools
Inspect an element in Chrome or Firefox DevTools to see a box model diagram showing margin, border, padding, and content all at once.
Collapsing margins
- Vertical margins between block elements collapse to the largest value.
- A parent and its first/last child can share margins unless padding or borders intervene.
- Use padding on containers to avoid unexpected collapses.
If you want to read more about Margin Collapse or get an in-depth understanding, go to CSS Margin in our CSS tutorial.
Shorthand properties
Control spacing efficiently with shorthands:
margin: 24px 16px;➜ top/bottom 24px, left/right 16px.padding: 8px 12px 16px;➜ top/right/bottom/left in clockwise order.border: 2px solid #1d4ed8;➜ width, style, color.
Example layout
Card component
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<article class="card">
<h2>UX Writing Checklist</h2>
<p>Keep copy concise, conversational, and aligned with the design system voice.</p>
<a class="cta" href="#">Download PDF</a>
</article>
</body>
</html>
:root {
--surface: #fff;
--border: #d4d9e5;
--accent: #2563eb;
}
body {
font-family: "Inter", sans-serif;
background: #f1f5f9;
padding: 48px;
}
.card {
width: min(400px, 90vw);
margin: 0 auto;
padding: 24px 28px;
border: 2px solid var(--border);
border-radius: 18px;
background: var(--surface);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}
.card h2 {
margin: 0 0 12px;
}
.card p {
margin: 0 0 16px;
line-height: 1.6;
}
.cta {
display: inline-block;
padding: 10px 18px;
border-radius: 999px;
background: var(--accent);
color: #fff;
text-decoration: none;
}
Spacing strategies
- Create a spacing scale (e.g., base of 4 or 8) and stick to it across components.
- Use CSS custom properties for consistent margins and padding.
- Combine
gapwith Flexbox or Grid to separate items without extra margins.
