Definition
The rectangular box every HTML element generates, composed of content, padding, border, and margin layers—plus box-sizing which determines whether width/height include padding and border.
Why It Matters
The box model is the core logic of web layout. Mastering it is the difference between a predictable, professional design and a fragile layout that breaks with every small change in content or screen size.
Core Concepts
- Content: Text or image area.
- Padding: Transparent space inside the border.
- Border: Visible edge around padding.
- Margin: Transparent space outside the border; vertical margins collapse between siblings.
content-box: Default; width/height apply to content only.border-box: Width/height include padding and border—predictable sizing.- Display Types:
block,inline,inline-block,none.
.box {
box-sizing: border-box; /* Sizing includes padding/border */
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}