Syllabus

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

Badar KhalilUpdated September 30, 2026 7 min read

CSS Box Model: The Complete Guide to Content, Padding, Border and Margin

The CSS box model is the foundation of every web layout. Every HTML element is drawn as a rectangular box, and the box model defines how the size of that box is calculated and how much space it occupies on the page. Once you understand the CSS box model, you will know why elements sometimes become wider than expected, why spacing behaves in surprising ways, and how Flexbox, CSS Grid and responsive design really work under the hood.

What You Will Learn

The four layers of the box model: content, padding, border and margin
How total element width and height are calculated
The difference between box-sizing: content-box and box-sizing: border-box
How to write a modern CSS reset with border-box
Border vs outline vs box-shadow, and block vs inline boxes
CSS logical properties for international layouts
How to debug the box model in browser DevTools

The Four Layers of the CSS Box Model

Every box is made of four layers, from the inside to the outside:

Content: the area where your text, images or child elements live. Its size is controlled by width and height.
Padding: the space between the content and the border. The element background is painted behind the padding.
Border: a line or frame that wraps the padding and content, with its own thickness, style and color.
Margin: the invisible space outside the border that pushes other elements away. Margin is always transparent.

Visual Diagram of the Box Model

+--------------------- MARGIN ---------------------+
|  +------------------ BORDER ------------------+  |
|  |  +-------------- PADDING --------------+  |  |
|  |  |                                     |  |  |
|  |  |               CONTENT               |  |  |
|  |  |                                     |  |  |
|  |  +-------------------------------------+  |  |
|  +---------------------------------------------+  |
+---------------------------------------------------+

How Total Width and Height Are Calculated

By default, the width property only sets the size of the content box. Padding and border are added on top of it.

Total width  = width + padding-left + padding-right + border-left + border-right
Total height = height + padding-top + padding-bottom + border-top + border-bottom
Space used   = total size + margin on each side

Example: an element with width: 300px, padding: 20px and border: 5px solid is 350px wide by default (300 + 20 + 20 + 5 + 5). This is the number one reason layouts overflow their parent.

box-sizing: content-box vs border-box

The box-sizing property changes how width and height are calculated.

Value	width applies to	Effect of adding padding or border
content-box (default)	Content only	The box grows bigger
border-box	Content + padding + border	The box keeps its size; the content area shrinks

With box-sizing: border-box, a width: 300px element stays exactly 300px wide no matter how much padding or border you add. This makes percentage layouts, grids and responsive design far easier to predict. Margin is never included in either mode.

The Modern CSS Reset: Universal border-box

Almost every modern CSS reset and framework, including Tailwind CSS Preflight and Bootstrap, sets border-box globally. The classic snippet is *, *::before, *::after { box-sizing: border-box; }. A second pattern sets border-box on the root and lets everything inherit it, so a third-party component can opt out locally: html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }. Note that box-sizing is not inherited by default, which is why the second pattern uses the inherit keyword.

Border vs Outline vs Box-shadow

Border is part of the box model and changes the layout size.
Outline is drawn outside the border edge and takes no space, so it never causes layout shift. It is ideal for focus rings. Use outline-offset to add a gap.
Box-shadow also takes no space and does not affect layout. A spread-only shadow such as box-shadow: 0 0 0 3px blue can imitate a border without changing size.

Never remove focus outlines without providing an accessible replacement (use :focus-visible).

Block, Inline and Inline-Block Boxes

Block boxes (div, p, section) start on a new line, stretch to the available width and respect width, height, padding and margin on all sides.
Inline boxes (span, a, strong) flow with text. They ignore width and height, and vertical margin has no effect. Vertical padding and border are painted but do not push neighbouring lines.
Inline-block boxes flow like text but behave like blocks inside, so width, height and all spacing work.

Background and the Box Model

By default, the background is painted under the content, padding and border (background-clip: border-box). You can change this with background-clip: padding-box or content-box, and control where the background image starts with background-origin.

Logical Properties and the Box Model

Modern CSS adds logical properties that adapt to writing direction (left-to-right, right-to-left, vertical). Use margin-inline, margin-block, padding-inline, padding-block, inline-size and block-size instead of left, right, top and bottom. This gives proper support for right-to-left languages such as Urdu and Arabic.

Debugging the Box Model in DevTools

Right-click any element and choose Inspect.
Open the Computed tab (Chrome, Edge) or the Layout panel (Firefox) to see the box model diagram: content in blue, padding in green, border in yellow and margin in orange in Chrome.
Hover over the element in the Elements panel to highlight its areas on the page.
Edit values live in the Styles pane to test spacing before changing your code.

Common Box Model Mistakes

Setting width: 100% with padding in content-box mode, which causes horizontal overflow.
Expecting vertical margin to work on inline elements.
Forgetting that vertical margins can collapse (covered in the margin lesson).
Using borders for focus styles, which shifts layout. Use outline instead.
Mixing border-box and content-box components without realising it.

Best Practices

Always apply box-sizing: border-box globally at the top of your stylesheet.
Use padding for space inside an element and margin or gap for space between elements.
Prefer logical properties for new projects.
Verify real rendered sizes with DevTools instead of guessing.

Frequently Asked Questions

What is the CSS box model in simple words?

Every element is a box made of content, padding, border and margin, and these layers decide how big the element is and how much space it takes.

Why is my div wider than the width I set?

Padding and border are added to the width in the default content-box mode. Switch to border-box.

Does margin count inside the element width?

No. Margin is outside the element, even in border-box mode.

Is border-box safe to use?

Yes. It is supported in every major browser and is the standard in modern projects.

Key Takeaways

Box model layers: content, padding, border, margin.
Default box-sizing is content-box, so padding and border add to the width.
Use *, *::before, *::after { box-sizing: border-box; } in every project.
Outline and box-shadow do not affect layout; border does.
Inspect boxes in DevTools to debug spacing quickly.

Try it Yourself HTML

<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #2c3e50;
  margin: 30px;
  background: #ecf0f1;
  font-family: sans-serif;
}
</style>
<div class='box'>Content 200px, padding 20px, border 5px, margin 30px. Inspect me!</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.a, .b {
  width: 300px;
  padding: 20px;
  border: 5px solid #e74c3c;
  margin-bottom: 16px;
  background: #fdecea;
  font-family: sans-serif;
}
.a { box-sizing: content-box; }
.b { box-sizing: border-box; }
</style>
<div class='a'>content-box: total width is 350px</div>
<div class='b'>border-box: total width is 300px</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const el = document.createElement('div');
el.style.cssText = 'width:300px;padding:20px;border:5px solid black;box-sizing:content-box;';
document.body.appendChild(el);
console.log('content-box offsetWidth:', el.offsetWidth);
el.style.boxSizing = 'border-box';
console.log('border-box offsetWidth:', el.offsetWidth);
const cs = getComputedStyle(el);
console.log('padding-left:', cs.paddingLeft);
console.log('border-left-width:', cs.borderLeftWidth);
el.remove();

Output

Press Run to execute.

Try it Yourself CSS

/* Modern CSS reset: universal border-box */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Alternative: inherit pattern, easy to opt out per component */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body { margin: 0; }

Output

Press Run to execute.

Try it Yourself HTML

<style>
.demo { width: 150px; padding: 10px; margin: 20px; background: #eaf2f8; display: inline-block; font-family: sans-serif; }
.with-border { border: 8px solid teal; }
.with-outline { outline: 8px solid tomato; outline-offset: 2px; }
.with-shadow { box-shadow: 0 0 0 8px goldenrod; }
</style>
<div class='demo with-border'>Border: adds to size</div>
<div class='demo with-outline'>Outline: no layout impact</div>
<div class='demo with-shadow'>Shadow: no layout impact</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
span { background: #f9e79f; padding: 10px 20px; margin: 20px; width: 300px; height: 80px; }
.ib { display: inline-block; }
p { font-family: sans-serif; line-height: 2; }
</style>
<p>Inline span: <span>width, height and vertical margin are ignored</span> and the text continues.</p>
<p>Inline-block: <span class='ib'>width, height and margins all work</span> here.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.layers { padding: 30px; border: 10px dashed #2c3e50; background: #f5b041; }
.clip-padding { background-clip: padding-box; }
.clip-content { background-clip: content-box; }
.layers { margin: 10px 0; font-family: sans-serif; }
</style>
<div class='layers'>background-clip: border-box (default)</div>
<div class='layers clip-padding'>background-clip: padding-box</div>
<div class='layers clip-content'>background-clip: content-box</div>

Output

Press Run to execute.

Try it Yourself CSS

/* Logical properties adapt to writing direction */
.card {
  padding-inline: 1.5rem;
  padding-block: 1rem;
  margin-block-end: 2rem;
  inline-size: min(100%, 40rem);
  border-inline-start: 4px solid #3498db;
}

Output

Press Run to execute.

Exercise: Fix the Overflowing CardHTML

The card below is set to width 100% but it overflows its 400px parent because of padding and border. Fix it with one CSS property so the card fits exactly inside the parent, without changing its width, padding or border values.

Try it Yourself HTML

<style>
.parent { width: 400px; background: #eee; }
.card { width: 100%; padding: 24px; border: 4px solid #333; background: #fff; }
</style>
<div class='parent'>
  <div class='card'>I should fit inside my parent.</div>
</div>

Output

Press Run to execute.

Show expected output

The card is exactly 400px wide in total and no horizontal overflow appears (box-sizing: border-box).

This is a self-check — compare your result with the expected output above.

Exercise: Calculate Total Box WidthJAVASCRIPT

Write a function totalWidth(width, padding, border, boxSizing) that returns the total rendered width (without margin). Padding and border values are per side. For content-box add padding and border on both sides, for border-box return the width itself.

Try it Yourself JAVASCRIPT

function totalWidth(width, padding, border, boxSizing) {
  // TODO: implement
}

console.log(totalWidth(300, 20, 5, 'content-box'));
console.log(totalWidth(300, 20, 5, 'border-box'));

Output

Press Run to execute.

Show expected output

350
300

This is a self-check — compare your result with the expected output above.

Was this page helpful?