In CSS, every element is rendered as a box.
Once you understand the four-stage structure of the box model, you can solve layout problems precisely.
1. The four stages of the box model
┌───────────────────────────────────────┐
│ margin (outer space) │
│ ┌─────────────────────────────────┐ │
│ │ border (frame) │ │
│ │ ┌───────────────────────────┐ │ │
│ │ │ padding (inner space) │ │ │
│ │ │ ┌─────────────────────┐ │ │ │
│ │ │ │ content (inner) │ │ │ │
│ │ │ └─────────────────────┘ │ │ │
│ │ └───────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
└───────────────────────────────────────┘
| Area | Description |
|---|---|
| content | The area that holds the actual content (text, images) |
| padding | The inner space between content and border |
| border | The border that surrounds the element |
| margin | The space outside the element, between it and other elements |
div {
/* Content */
width: 200px;
height: 100px;
/* Inner spacing (top right bottom left order) */
padding: 10px 20px 10px 20px;
padding: 10px 20px; /* 10px top/bottom, 20px left/right */
padding: 10px; /* 10px on all four sides */
padding-top: 10px; /* Individual setting for each side */
/* Border */
border: 2px solid #333; /* thickness style color */
border-radius: 8px; /* round the corners */
/* Outer spacing */
margin: 20px auto; /* 20px top/bottom, auto left/right (centered) */
}
2. box-sizing: border-box
By default, width is the size of the content area only.
If you add padding and border, the actual element becomes larger.
/* Default: width = content only */
/* Actual size = 200 + 40(padding) + 4(border) = 244px */
.default {
width: 200px;
padding: 20px;
border: 2px solid black;
box-sizing: content-box; /* default value */
}
/* border-box: width = content + padding + border */
/* Actual size = always 200px */
.better {
width: 200px;
padding: 20px;
border: 2px solid black;
box-sizing: border-box; /* recommended */
}
In practice, we apply it everywhere with
* { box-sizing: border-box; }.
3. width, height, max-width
.container {
width: 100%; /* 100% of the parent's width */
max-width: 1200px; /* cap the maximum width (essential for responsive design) */
height: auto; /* automatic, based on the content */
min-height: 100vh; /* minimum height: viewport height */
}
4. overflow
Specifies how to handle content that is larger than the element.
.box {
overflow: visible; /* default: spills outside */
overflow: hidden; /* clipped (useful for cropping images) */
overflow: scroll; /* always show scrollbars */
overflow: auto; /* show scrollbars only when needed (recommended) */
}
5. The display property
/* Block element: takes up an entire line, width/height can be set */
display: block; /* default for div, p, h1~h6, section */
/* Inline element: flows like text, width/height cannot be set */
display: inline; /* default for span, a, strong */
/* Inline block: flows like text but width/height can be set */
display: inline-block; /* default for img, button */
/* Hidden */
display: none; /* removed from the screen entirely */
6. Margin collapse
The vertical margins of two adjacent elements are not added together; only the larger one applies.
.first { margin-bottom: 30px; }
.second { margin-top: 20px; }
/* Actual gap: 30px (not 30 + 20 = 50px!) */
How to fix it:
- Replace them with
padding - Apply
overflow: hiddenorpadding: 1pxto the parent - Use Flexbox/Grid (no collapsing)
Example file
Open box-model.html in the examples/ folder to see a visualization demo where each area is distinguished by color.
Assignment
Read assignment.md and build the card component.