Controls

Box Sizing Mode

Width includes padding and border

Content

Width 200px
Height 150px

Padding

All Sides 20px

Border

Width 2px

Margin

All Sides 20px
.element { box-sizing: border-box; width: 200px; height: 150px; padding: 20px; border: 2px solid yellow; margin: 20px; }

Visual Box Model

Margin: 20px
Border: 2px
Padding: 20px
Content: 200×150px CONTENT

Total Element Size

244px × 194px

200 + (20×2) + (2×2) + (20×2)