Lesson 6 of 12
Structured learning draftSize and space elements predictably
Every rendered element occupies a box made from content, padding, border and margin. Predictable sizing prevents accidental overflow and fragile layouts. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Calculate the rendered box size.
- Apply consistent sizing and spacing.
- Diagnose overflow instead of hiding it.
Size and space elements predictably
Size and space elements predictably: box model to box-sizing to overflow.
Calculate the rendered box size.
Apply consistent sizing and spacing.
Diagnose overflow instead of hiding it.
*, *::before, *::after { box-sizing: border-box; }
.project-card {
width: min(100%, 42rem);
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid #cbd5e1;
overflow-wrap: anywhere;
}
.project-card img { display: block; max-width: 100%; height: auto; }With border-box, a declared width includes padding and border. Margin separates boxes; gap belongs to layout containers and avoids outer-edge exceptions. Horizontal overflow often comes from fixed widths, long unbroken content, intrinsic media sizes or non-wrapping flex items.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Using fixed pixel widths for page content.
- Applying overflow-x:hidden before finding the cause.
- Adding vertical margins to every child instead of a container gap.
Practice activity
Apply the lesson
Build a card that remains usable from 320 to 1280 CSS pixels. Test a long URL, 200% zoom and an oversized image. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
With box-sizing:border-box, what does width:300px include?
Lesson summary
- Border-box makes declared dimensions predictable.
- Fluid constraints outperform device-specific widths.
- Overflow is evidence of a constraint problem.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note