The Box Model
Everything in CSS is a box - master how they work and you'll master layouts
Box Model Fundamentals
The CSS box model describes how every element is rendered as a rectangular box, consisting of content, padding, border, and margin layers.
The Anatomy of a Box
The actual content of your element lives here
/* The box model layers */
.element {
/* Content dimensions */
width: 300px;
height: 150px;
/* Padding: space inside the border */
padding: 20px;
/* Border: the element's frame */
border: 5px solid var(--colour-primary);
/* Margin: space outside the border */
margin: 30px;
/* Background affects content + padding */
background: var(--colour-surface);
}Padding
/* Padding variations */
.uniform {
padding: 20px;
}
.directional {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
.shorthand {
/* top right bottom left */
padding: 10px 20px 30px 40px;
/* vertical horizontal */
padding: 20px 40px;
}Margin
/* Margin techniques */
.basic {
margin: 20px;
}
.auto {
width: 200px;
margin: 0 auto; /* Horizontal centering */
}
.negative {
margin-top: -10px; /* Pulls element up */
margin-left: -20px; /* Overlaps left */
}
/* Margin collapse */
.paragraph {
margin-bottom: 20px;
}
.next-paragraph {
margin-top: 30px;
/* Total space: 30px (not 50px) */
}Borders
/* Border styles */
.solid {
border: 3px solid var(--colour-primary);
}
.dashed {
border: 2px dashed var(--colour-secondary);
}
.gradient {
border: 4px solid transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(45deg, #f06, #48f) border-box;
}
.rounded {
border: 2px solid var(--colour-border);
border-radius: 12px;
/* Individual corners */
border-top-left-radius: 20px;
}Box Sizing Models
The box-sizing property changes how the total width and height of elements are calculated. This can make layouts much more predictable!
Content Box vs Border Box
content-box (default)
Width: 300px + padding + border
border-box
Width: 300px total
/* Default behaviour */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid;
/* Total width: 300 + 40 + 10 = 350px */
}
/* Modern approach */
.border-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid;
/* Total width: 300px (includes padding/border) */
}
/* Best practice: apply globally */
*, *::before, *::after {
box-sizing: border-box;
}Practical Example
/* With border-box, math is easy! */
.layout-grid {
display: flex;
gap: 20px;
}
.grid-item {
box-sizing: border-box;
width: 33.333%;
padding: 20px;
border: 2px solid;
/* No need to calculate! */
}Interactive Box Model Playground
Experiment with different values to see how they affect the box model in real-time.
Adjust Properties
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid;
margin: 20px;
box-sizing: content-box;
}Advanced Box Model Techniques
Take your box model skills to the next level with these advanced techniques and edge cases.
Margin Collapse
Gap = 30px (not 50px)
/* Margins collapse vertically */
.first {
margin-bottom: 30px;
}
.second {
margin-top: 20px;
}
/* Result: 30px gap (larger wins) */
/* Prevent collapse */
.parent {
/* Any of these work: */
overflow: hidden;
padding: 1px;
border: 1px solid transparent;
}Outline vs Border
/* Border affects box size */
.border-style {
border: 3px solid var(--colour-primary);
}
/* Outline doesn't affect layout */
.outline-style {
outline: 3px solid var(--colour-secondary);
outline-offset: 2px;
}
/* Perfect for focus states */
.focus-style:focus {
outline: 2px dashed currentColor;
outline-offset: 4px;
}Percentage Calculations
/* Percentages reference parent */
.parent {
width: 400px;
height: 200px;
}
.child {
/* Width: 50% of parent width */
width: 50%; /* = 200px */
/* Padding: % of parent WIDTH */
padding: 10%; /* = 40px all sides */
/* Margin: % of parent WIDTH */
margin: 25%; /* = 100px */
/* Height % needs parent height */
height: 50%; /* = 100px */
}Box Shadow Layers
/* Box shadows don't affect layout */
.basic-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.inset-shadow {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.multiple-shadows {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.1);
}
.glow-effect {
box-shadow:
0 0 20px rgba(59, 130, 246, 0.5),
0 0 40px rgba(59, 130, 246, 0.3);
}Box Model Best Practices
Always Use Border-Box
Set box-sizing: border-box globally to make width calculations predictable and intuitive.
Margin for Spacing Between
Use margin for space between elements, padding for space inside elements.
Consistent Spacing Scale
Define spacing variables (8px, 16px, 24px...) for consistent rhythm throughout your design.
Outline for Focus States
Use outline instead of border for focus indicators to avoid layout shifts.