The Box Model, Margin, Padding, Width, Height, and Overflow
Understand the layout foundation that explains how elements occupy space and why spacing often behaves the way it does in CSS.
Inside this chapter
- What the Box Model Is
- Padding vs Margin
- box-sizing
- Overflow Behavior
- Collapsing and Unexpected Spacing
- Practical Example
Series navigation
Study the chapters in order for the clearest path from CSS basics and styling foundations to advanced layout, responsive design, architecture, and maintainable interface systems. Use the navigation at the bottom to move smoothly through the full tutorial series.
What the Box Model Is
Every element is treated like a rectangular box in layout. That box includes content, padding, border, and margin. Students who understand the box model solve many CSS layout problems much faster.
Padding vs Margin
.card {
padding: 24px;
margin-bottom: 16px;
}Padding creates internal space inside the element boundary. Margin creates external space outside the element. Confusing these two leads to many beginner layout issues.
box-sizing
* {
box-sizing: border-box;
}The border-box model often makes layout sizing easier because width and height calculations include padding and border.
Overflow Behavior
When content exceeds the available box size, overflow rules determine what happens. This matters for scrollable regions, fixed-height cards, code blocks, and mobile menus.
Collapsing and Unexpected Spacing
Some margin behaviors, especially vertical margin collapse, surprise beginners. Understanding these layout rules helps explain spacing glitches without guessing.
Practical Example
An article card with inconsistent padding and margin may look unbalanced even if the text is correct. Good box-model understanding helps build cleaner components and more predictable spacing systems.