CSS Box Model

Every element on a page is a rectangular box with four areas: content → padding → border → margin.

1) What is the Box Model?

Content area (text, images, etc.)
Blue solid = border, light blue = padding, white dashed = content. Margin is the space outside this blue border.

2) Padding

Padding is the space inside the border and around the content. It increases the background-colored area.

No padding
Large padding (32px)

3) Margin

Margin is the space outside the border. It creates distance between elements.

Small margin (8px)
Large margin (32px)

4) Border

The border wraps the padding and content. It can have style, width, color, and radius.

Solid border
Dashed border
Double border
Rounded corners

5) Width and Height

Width/height apply to the content box by default. Padding and border add on top of these values (unless using box-sizing: border-box).

Fixed size content (220×90)
Auto width grows with content

6) Display

display controls how an element participates in layout.

Block element (takes full width)
Another block element
inlineelementssitononeline
inline-block chip respects width/height

7) Box Sizing

With content-box (default), declared width excludes padding and border. With border-box, declared width includes padding and border.

content-box width: 220px
(total rendered width = 220 + padding + border)
border-box width: 220px
(total rendered width = exactly 220px)