CSS Box Model, Box-Sizing & Margin Collapsing
1Concept
The CSS Box Model comprises Content -> Padding -> Border -> Margin. box-sizing: border-box includes padding and border within the declared width/height.
2Architecture Diagram
+------------------------------------+ | Margin (Transparent outer space) | | +------------------------------+ | | | Border | | | | +------------------------+ | | | | | Padding | | | | | | +------------------+ | | | | | | | Content (W x H) | | | | | | | +------------------+ | | | | | +------------------------+ | | | +------------------------------+ | +------------------------------------+
3Code Example
Stage 0 Language Foundations
* {
box-sizing: border-box; /* Universal sizing standard */
margin: 0;
padding: 0;
}
.card {
width: 320px;
padding: 24px;
border: 2px solid #6366f1;
margin: 16px;
/* Total outer box width remains EXACTLY 320px! */
}4Expected Output
[Card element measures exactly 320px in DevTools without overflow]
5Key Takeaways
- ✓Always set 'box-sizing: border-box' globally.
- ✓Vertical margins on adjacent block elements collapse into the larger margin.
- ✓Padding adds inner spacing; margin adds outer separation.