CSS Box Model

To the browser, every element on a page is a rectangle. Headings, paragraphs, buttons and images are all boxes. The CSS box model describes the layers that make up each box and how much space it takes. Once you understand it, spacing problems stop being a mystery.

The four layers of the CSS box model

From the inside out, every box has four areas:

1. Content: the text or image itself. Its size can be set with width and height.
2. Padding: space between the content and the border. The background colour shows through the padding.
3. Border: a line around the padding, set with border, for example 2px solid #ccc.
4. Margin: transparent space outside the border that pushes other boxes away.

A simple way to remember it: padding is space inside the frame, margin is space outside it. If you want a coloured area to grow, add padding. If you want two boxes further apart, add margin or, inside flex and grid layouts, use gap.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seeing the four layers</title>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }

.box {
  width: 220px;
  padding: 20px;
  border: 6px solid #2a9d8f;
  margin: 30px;
  background: #e9f5f3;
}

.outline {
  /* the dashed outline shows where the margin ends */
  outline: 1px dashed #999;
  display: inline-block;
}
</style>
</head>
<body>
<div class="outline">
  <div class="box">Content area 220px wide, with 20px padding, a 6px border and 30px margin.</div>
</div>
</body>
</html>

Shorthand values

padding and margin accept one to four values, which go clockwise starting from the top:

You can also set one side with properties like margin-top. Modern CSS adds logical properties such as margin-block (top and bottom) and padding-inline (left and right in English). They follow the writing direction, so a layout also works in right-to-left languages like Urdu without changes.

Why box-sizing: border-box matters

By default, width sets only the content width. Padding and border are added on top. In the first example, the box is actually 220 + 20 + 20 + 6 + 6 = 272px wide, not 220px. This default is called content-box, and it makes sizing awkward.

With box-sizing: border-box, the width you set includes padding and border, and the content shrinks to fit. A 220px box stays 220px. Almost every modern project applies this to all elements at the start of the stylesheet:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>content-box vs border-box</title>
<style>
*, *::before, *::after {
  box-sizing: border-box;
}

body { font-family: system-ui, sans-serif; padding: 20px; }

.card {
  width: 260px;
  padding: 24px;
  border: 4px solid #6a4c93;
  margin-block-end: 16px;
  background: #f3effa;
}

.old-way {
  box-sizing: content-box; /* override to compare */
}
</style>
</head>
<body>
<div class="card">border-box: total width is exactly 260px.</div>
<div class="card old-way">content-box: total width is 260 + 48 + 8 = 316px.</div>
</body>
</html>

Margin collapsing

Vertical margins between block elements can collapse. If a heading has a 30px bottom margin and the next paragraph has a 20px top margin, the gap between them is 30px, not 50px. The larger margin wins. This only happens with vertical (block) margins in normal flow, not with padding, and not between items inside a flex or grid container.

Collapsing surprises beginners, but it is intentional: it stops spacing doubling up between paragraphs. A simple habit that avoids confusion is to add margin in one direction only, for example always margin-block-end.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Margin collapsing and auto margins</title>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }

h2 { margin-block-end: 30px; background: #fff3cd; }
p  { margin-block-start: 20px; background: #d1ecf1; }

.centred {
  width: 60%;
  margin-inline: auto;   /* equal left and right margins */
  padding: 16px;
  border: 2px solid #0d6efd;
  text-align: center;
}
</style>
</head>
<body>
<h2>Heading with 30px bottom margin</h2>
<p>The gap above me is 30px, not 50px, because the margins collapse.</p>
<div class="centred">A fixed-width block centred with margin-inline: auto</div>
</body>
</html>

Borders and rounded corners

The border shorthand takes width, style and colour. The style is required: without solid, dashed or dotted, no border appears. border-radius rounds the corners, and border-radius: 50% on a square makes a circle, perfect for profile photos. Outlines (outline) look similar but take no space in the box model, which is why they are used for focus rings.

Block and inline boxes

The CSS box model applies fully to block elements such as <div>, <p> and headings, which start on a new line and fill the available width. Inline elements such as <span>, <a> and <strong> sit inside a line of text. They ignore width and height, and their top and bottom margins do not push other lines away. If you need a link to behave like a button with real padding and size, change its display type, which you will learn in CSS Display and Position.

Next, learn how to style the content inside the box in CSS Text and Fonts. Box sizes come back again in CSS Units, where you will swap fixed pixels for flexible units.

Further reading

• developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-sizing
• developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Margin_collapsing
• web.dev/learn/css/box-model