The CSS Box Model is the foundation of web layout. Learn it once, understand everything. This is your visual guide.
Imagine wrapping a gift. You place the gift inside, add some bubble wrap so it doesn't rattle, put it in a box with thick walls, and then leave some space between that box and other packages.
That's exactly what CSS does with every element on a webpage. The gift is your content. The bubble wrap is padding. The box walls are border. The space between packages is margin.
Every HTML element is surrounded by four invisible layers. Together they control size, spacing, and appearance.
The actual stuff inside — text, images, video. You control its
size with width and
height.
Breathing room inside the border. It pushes the border away from the content. Inherits the background color.
A line that wraps around the padding. Can be solid, dashed, dotted, or even invisible. Has its own width and color.
Space outside the border — the gap between this element and everything else. It's always transparent.
Drag the sliders to reshape the box. Watch each layer respond in real time.
See the box model on a real <div> element.
The diagram is not abstract — this is exactly how your CSS behaves.
content-box mode. Use border-box to keep dimensions predictable.
Ready to go deeper?
Margin collapsing, border-box vs content-box, browser rendering — the deep dive awaits.
Take the Deep Dive →