CSS Box Model

The CSS box model says every element is a rectangle made of four layers: the content, padding around the content, a border around the padding, and margin outside the border. Understanding it is the key to controlling space on a page.

The Four Layers

• Content: the text or image itself, sized by width and height
• Padding: space inside the border; takes the background color
• Border: a line around the padding (width, style, color)
• Margin: transparent space outside the border that pushes other elements away

Padding, Border and Margin Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #2563eb;
  margin: 30px;
  background: #dbeafe;
  font-family: sans-serif;
}
</style>
</head>
<body>
<div class="box">Content area</div>
<div class="box">Margins keep us apart</div>
</body>
</html>

Shorthand Values

margin and padding accept 1 to 4 values. One value sets all sides. Two values set top/bottom then left/right. Four values go clockwise: top, right, bottom, left. margin: 0 auto centers a block with a set width horizontally.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.card {
  width: 260px;
  margin: 20px auto;      /* centered */
  padding: 10px 24px;     /* vertical horizontal */
  border: 2px dashed #16a34a;
  border-radius: 12px;
}
</style>
</head>
<body>
<div class="card">I am centered with margin: 20px auto.</div>
</body>
</html>

box-sizing: border-box

By default width only covers the content, so padding and border are added on top. A 200px box with 20px padding and a 5px border is really 250px wide. With box-sizing: border-box, width includes padding and border, which is far easier to reason about. Most projects set it on every element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
.a, .b { width: 200px; padding: 20px; border: 5px solid #333; margin-bottom: 10px; }
.b { box-sizing: content-box; background: #fee2e2; }
.a { background: #dcfce7; }
</style>
</head>
<body>
<div class="a">border-box: 200px total</div>
<div class="b">content-box: 250px total</div>
</body>
</html>

Margin Collapse

Vertical margins between two blocks collapse: a 30px bottom margin next to a 20px top margin gives 30px of space, not 50px. Padding never collapses, and margins inside Flexbox and Grid containers do not collapse either.

Frequently asked questions

What is the difference between margin and padding?

Padding is space inside the border and shows the element's background. Margin is space outside the border and is always transparent.

Why use box-sizing: border-box?

It makes width and height include padding and border, so an element set to 300px wide really is 300px wide.

How do I center a div horizontally?

Give it a width and use margin: 0 auto, or make its parent a flex container with justify-content: center.