The CSS Box Model Explained: Content, Padding, Border and Margin

The CSS box model says every element is a box made of content, padding, border and margin. Learn each layer, the shorthand, and how to center a block with margin auto.

What is the CSS box model?

In CSS, every element is a rectangle, even if it doesn't look like one. Each box has four layers, from the inside out:

+---------------------------------------------+
|                   MARGIN                    |
|   +-------------------------------------+   |
|   |               BORDER                |   |
|   |   +-----------------------------+   |   |
|   |   |           PADDING           |   |   |
|   |   |   +---------------------+   |   |   |
|   |   |   |       CONTENT       |   |   |   |
|   |   |   |   text, images...   |   |   |   |
|   |   |   +---------------------+   |   |   |
|   |   +-----------------------------+   |   |
|   +-------------------------------------+   |
+---------------------------------------------+

Think of a framed picture on a wall. The content is the picture. The padding is the white space (the mat) between the picture and the frame. The border is the frame. The margin is the empty wall space between this frame and the next one.

Content, padding, border and margin

• Content is where your text and images live. Its size can be set with width and height.
• Padding is space inside the border. It takes the element's background color.
• Border is a line around the padding. It needs a width, a style and a color, like border: 2px solid #333;. Common styles are solid, dashed and dotted.
• Margin is space outside the border. It is always transparent and pushes other elements away.

<div class="note">Remember to drink water today!</div>
<div class="note">Take a short walk after lunch.</div>

.note {
  background-color: #e3f2fd;
  padding: 20px;
  border: 3px solid #1e88e5;
  margin: 16px;
}

You will see two light blue boxes with a blue frame. The text has 20 pixels of breathing room inside the frame (padding), and the boxes have space between them and the page edges (margin).

Tip: Right-click a box and choose Inspect. In DevTools, open the Computed tab (or the "Layout" view) to see a colored box model diagram with the exact padding, border and margin numbers.

What is the difference between padding and margin?

This is the most common beginner question. A simple test: does the space need the background color?

• Padding is inside the box, so the background color fills it. Use it to give content room to breathe.
• Margin is outside the box and always transparent. Use it to separate one box from another.

Padding and margin shorthand (1 to 4 values)

You can set each side separately with padding-top, padding-right, padding-bottom and padding-left (the same for margin). But the shorthand is faster. It accepts 1 to 4 values, always going clockwise from the top, like a clock.

Code	Meaning
padding: 10px;	All four sides 10px
padding: 10px 20px;	Top and bottom 10px, left and right 20px
padding: 10px 20px 30px;	Top 10px, left and right 20px, bottom 30px
padding: 10px 20px 30px 40px;	Top 10px, right 20px, bottom 30px, left 40px

To remember the four-value order, think "TRouBLe": Top, Right, Bottom, Left.

Margin collapse and how to center a block with margin: 0 auto

Here's a surprise. When two block boxes are stacked on top of each other, their vertical margins don't add up. The bigger margin wins. This is called margin collapse.

.first  { margin-bottom: 30px; }
.second { margin-top: 20px; }

You might expect 50px between them, but you get 30px. It only happens with top and bottom margins, never left and right. A simple habit avoids confusion: add vertical space in one direction only, for example always use margin-bottom.

To center a box horizontally, give it a width (or max-width) and set the left and right margins to auto. The browser shares the leftover space equally on both sides.

<main class="container">
  <h1>About Us</h1>
  <p>We are a small team that builds friendly websites for local shops.</p>
</main>

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  background-color: #fafafa;
  border: 1px solid #ddd;
}

The box is at most 600px wide and sits in the middle of the page, with no extra space above or below. On a small phone screen it becomes narrower than 600px, so it still fits.

Common mistake: Using margin: 0 auto on a box without a width. A block element is already full width, so there is no leftover space to share, and nothing seems to happen.

Practice exercise

Create three "testimonial" boxes with a quote and a name in each. Give them padding, a left border only (border-left: 5px solid teal;), a light background, and a margin-bottom of 20px. Put all three in a container that is centered with max-width: 700px and margin: 0 auto.

Hint: use DevTools to check the box model of one testimonial and confirm the numbers match your CSS.

Frequently asked questions

Why is there space around my page even with no CSS?

Browsers add default styles. The <body> has a margin of about 8px, and headings and paragraphs have top and bottom margins. You can remove them with margin: 0;.

Can padding or margin be negative?

Margin can be negative, which pulls elements closer or makes them overlap. Padding cannot be negative.

Does the border add to the width of an element?

By default, yes. Padding and border are added on top of the width. The next lesson shows how box-sizing: border-box fixes this.

Key takeaways

• Every element is a box with four layers: content, padding, border and margin.
• Padding is inside the border and shows the background; margin is outside and transparent.
• Shorthand values go clockwise: top, right, bottom, left.
• Vertical margins between stacked blocks collapse: the bigger one wins.
• Center a block with a max-width plus margin: 0 auto.