CSS Box Model

The CSS Box Model describes how elements are rendered and spaced on a webpage. Each element is a rectangular box consisting of content, padding, border, and margin.

Content – The actual text or image.
Padding – Space between content and border.
Border – The edge around the padding.
Margin – Space outside the border.

1. Overview & box-sizing

The box-sizing property controls how the total width and height of an element are calculated.
content-box (default): width/height include only the content.
border-box: width/height include content, padding, and border.

Content Box
box-sizing: content-box;

Border Box
box-sizing: border-box;

2. Width & Height

width and height set the size of the content area.
You can use units like px, %, em, rem, etc.
width: 250px; height: 80px;

Width & Height Example

3. Padding

Padding adds space inside the element, between the content and the border.
You can set padding for each side: padding-top, padding-right, padding-bottom, padding-left.
padding: 24px;

Padding Example

4. Border

Border wraps around the padding and content.
You can set border style, width, and color.
border: 6px double #f6b26b;

Border Example

5. Margin

Margin creates space outside the border, separating elements from others.
You can set margin for each side: margin-top, margin-right, margin-bottom, margin-left.
margin: 32px auto;

Margin Example