← Back to Menu

The Box Model

Understand how padding, borders, and margins affect the total size of an element.

Box Properties

box-sizing: content-box (Default)

Requested Width: 200px

Computed Width (Total Space):

200 + (20×2) + (5×2) = 250px

Margin
Border
Padding
Content
200 px

box-sizing: border-box (Recommended)

Requested Width: 200px

Computed Width (Total Space):

Width absorbs padding/border. Total = 200px

Margin
Border
Padding
Content
150px