Language 8 of 10 · Topic 0.2

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.