Box Model & Box Sizing in CSS
From the CSS cheat sheet · Box Model · verified Jul 2026
Box Model & Box Sizing
Content, padding, border, margin, and how box-sizing changes the calculation
css
.box {
width: 300px;
padding: 20px;
border: 2px solid #ccc;
margin: 10px;
}
/* border-box: width INCLUDES padding + border */
*, *::before, *::after {
box-sizing: border-box;
}💡 Always use box-sizing: border-box globally — it makes width actually mean total width
⚡ margin-inline: auto centers a block element horizontally (works in all modern browsers)
📌 Vertical margins collapse — two 20px margins between elements becomes 20px, not 40px
🟢 aspect-ratio: 16/9 maintains proportions without the old padding-top hack
box-modelpaddingmarginsizing