Every single element on a web page, a paragraph, an image, a button, a whole section, is treated by the browser as a rectangular box. Understanding how that box is actually built, layer by layer, explains most of the sizing and spacing puzzles that trip people up when a layout refuses to behave.
This is the first entry in a short CSS companion series sitting alongside this site’s HTML building blocks articles. Where those cover the structure of a page, this series covers how that structure is actually styled and laid out, starting with the single most foundational concept in CSS.
The Four Layers of Every Box
.box { width: 300px; padding: 20px; border: 2px solid #333; margin: 10px;}
Every element’s box has four layers, nested inside one another like rings. At the centre sits the content itself, the actual text or image. Around that sits padding, space inside the box between the content and its edge. Around the padding sits the border, a visible or invisible line marking the box’s edge. Outside the border sits the margin, the space that separates this box from whatever sits next to it.
Content
The innermost area, where text, images or other elements actually sit. Its size is controlled by the width and height properties, or by the natural size of whatever content it holds.
Padding
Space between the content and the border, still considered part of the element itself. Padding takes the element’s background colour with it, which is the easiest way to tell padding apart from margin when inspecting a page.
Border
A line drawn around the padding, with its own width, style and colour. A border adds to the element’s total visible size unless box-sizing is set otherwise, which is where a great many layout surprises come from.
Margin
Space outside the border that separates the element from its neighbours. Margin is transparent, never takes a background colour, and can even be set to a negative value to deliberately overlap elements.
The box-sizing Property, and Why It Matters So Much
.box { box-sizing: content-box; /* default */}.box-alt { box-sizing: border-box;}
By default, the width you set on an element only applies to its content; padding and border are then added on top, making the box’s actual rendered size larger than the width you typed. This default behaviour, content-box, is the single most common source of “why is this wider than I expected” layout confusion.
Setting box-sizing to border-box changes this so that padding and border are included within the width you specify, meaning a 300px wide box stays 300px wide regardless of how much padding or border it has. Many CSS resets, and a fair amount of WordPress theme and page builder CSS, apply border-box globally for exactly this reason.
* { box-sizing: border-box;}
Why the Box Model Genuinely Matters
- Almost every layout bug, from overflowing containers to misaligned grids, traces back to a misunderstanding of how padding, border and margin add to an element’s total size
- Browser developer tools display a visual box model diagram for any selected element, instantly showing the actual size of each layer, genuinely worth getting familiar with
- Margin collapsing, where the margins of adjacent elements combine rather than simply add together, is a frequent source of unexpected spacing and is directly tied to how the box model works
- Setting a global border-box reset is one of the most common and genuinely useful first lines in any custom stylesheet
A Quick Box Model Checklist
☐ Remember width and height apply to content only, unless box-sizing is set to border-box
☐ Use browser developer tools to inspect the actual rendered box model of any troublesome element
☐ Consider a global box-sizing: border-box reset for more predictable sizing
☐ Remember padding takes background colour, margin does not
☐ Watch for margin collapsing between adjacent elements when vertical spacing looks larger or smaller than expected
Frequently Asked Questions
Does WordPress’s block editor let me control padding and margin without writing CSS?
Yes, most modern blocks expose padding and margin controls directly in the block settings panel, which apply the equivalent CSS behind the scenes. Custom theme CSS or page builder plugins typically still require understanding the underlying box model for anything more specific.
Why does my element look wider than the width I set?
This is almost always the default content-box behaviour, where padding and border are added on top of the specified width rather than included within it. Switching to box-sizing: border-box resolves this in most cases.
What is margin collapsing?
When two vertical margins meet, between stacked elements for example, browsers often collapse them into a single margin equal to the larger of the two, rather than adding them together. It catches people out regularly and is worth looking up in more depth once it causes a real problem.
Can margin be negative?
Yes, a negative margin pulls an element closer to, or even over, its neighbours. It is a legitimate technique for certain layout effects, though it is easy to overuse and can create maintenance headaches if you rely on it too heavily.
Does the box model apply to every HTML element?
Essentially yes, every element generates a box, though some display types, inline elements in particular, ignore certain box model properties like width and height unless their display value is changed.
Want Your Site’s Layout Looked At?
If you would like a second opinion on a layout that is not behaving the way you expect, get in touch for a straightforward conversation with no obligation and no sales pitch.