The CSS Box Model

Every HTML element can be thought of as a box. The CSS box model defines the size and properties of these boxes. The box model is made up of four parts: margin, border, padding, and the content area.

Box Model Components

Margin: Space outside the border of the element.
Border: Surrounds the padding and content, creating a visible boundary.
Padding: Space between the content and the border.
Content: The actual content of the box, such as text or images.

Example: Understanding the Box Model

This is a box with:

150px width
150px height
15px padding
5px border
20px margin

Comparing Different Box Properties

Larger Border (10px solid blue)

Increased Padding (30px)

Increased Margin (40px)

Notice how changing the margin, padding, or border size affects the total size and spacing of each box. Use these properties to control the layout and spacing of your elements.

Next: Style Tags vs External Stylesheets Back to Table of Contents