CSS Box Model

Every HTML element is a rectangular box made of four layers:

1. Content — the text or image inside
2. Padding — space between content and border (inside)
3. Border — a line around the padding
4. Margin — space outside the border (between elements)

Try It — Visualise the Box Model

Box Model Layers

Layer	Property	What it does
Content	width, height	The size of the content area
Padding	padding	Space inside the border
Border	border	Line around the element
Margin	margin	Space outside the element

Total Width Formula

Total width = width + left padding + right padding + left border + right border

Tip: Use box-sizing: border-box in your CSS to make width include padding and border automatically — this is much more predictable and is what most modern websites use.