CSS Box Model
Explore how margin, border, padding, and content work together to define the complete size and spacing of elements.
Adjust the controls below to see the CSS Box Model in action!
20px
5px
15px
200px
120px
Interactive Box Model
margin
border
padding
content
200×120
Box Sizing Comparison
content-box (default)
width: 200px
+ padding
+ border
= total width
+ padding
+ border
= total width
Width and height apply only to content area
border-box
width: 200px
includes padding
and border
= total width
includes padding
and border
= total width
Width and height include padding and border
Calculated Dimensions:
Content Area:
200×120px
With Padding:
230×150px
With Border:
240×160px
Total Size:
280×200px
Key Concepts:
- Content: The inner area where text and images appear
- Padding: Clear space around the content, inside the border
- Border: A line that goes around the padding and content
- Margin: Clear space outside the border, separates the element from others
- content-box: Width/height apply to content only (default)
- border-box: Width/height include content, padding, and border