CSS Box Model Guide

Visual interactive guide to the CSS box model.
Learn how content, padding, border, and margin work together.

Interactive Box Model Diagram

Adjust the sliders to see how each layer of the box model affects the total element size.

Content

Padding

Border

Margin

Content100px

Padding20px

Border5px

Margin20px

Calculated Total Width

20 + 5 + 20 + 100 + 20 + 5 + 20 = 190px

margin-left + border-left + padding-left + content + padding-right + border-right + margin-right

box-sizing Property

The box-sizing property controls how the total width and height of an element is calculated.

content-box

default

Width/height only includes the content. Padding and border are added on top.

/* width: 200px means content is 200px */
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* Total width: 200 + 20*2 + 5*2 = 250px */

content: 200pxTotal: 250px

border-box

recommended

Width/height includes content, padding, AND border. Much easier to work with.

/* width: 200px includes everything */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* Total width: 200px (content shrinks) */

content: 150pxTotal: 200px

Best Practice: Global Reset

Most developers apply border-box globally for predictable sizing:

*, *::before, *::after {
  box-sizing: border-box;
}

Margin

Margin creates space outside the element's border. It pushes other elements away.

Shorthand Syntax

margin: 10px;

All sides: 10px

margin: 10px 20px;

Top/bottom: 10px, Left/right: 20px

margin: 10px 20px 30px;

Top: 10px, Left/right: 20px, Bottom: 30px

margin: 10px 20px 30px 40px;

Top, Right, Bottom, Left (clockwise)

Auto Margins for Centering

margin: auto distributes available space equally.

.centered-block {
  width: 200px;
  margin: 0 auto; /* Centers horizontally */
}

Centered with margin: 0 auto

Margin Collapsing

When vertical margins of two elements touch, they collapse into a single margin equal to the larger of the two.

Expected (40px gap):

Box A (margin-bottom: 20px)
+
Box B (margin-top: 20px)
= 40px? NO!

Actual (20px gap):

Box A (margin-bottom: 20px)

Box B (margin-top: 20px)

Gap = 20px (collapsed)

When margins DON'T collapse:

- Flexbox or Grid containers
- Elements with padding or border between them
- Floated elements
- Absolutely positioned elements

Padding

Padding creates space inside the element's border, between the border and the content.

Shorthand Syntax

Same pattern as margin: 1 value (all), 2 values (vertical/horizontal), 3 values (top/horizontal/bottom), or 4 values (clockwise).

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Horizontal | Bottom */
padding: 10px 20px 30px;

/* Top | Right | Bottom | Left */
padding: 10px 20px 30px 40px;

Visual Examples

padding: 8px

Small

padding: 16px

Medium

padding: 32px

Large

Padding vs Margin

Padding: Inside the border, affects background color area, clickable area

Margin: Outside the border, creates space between elements, always transparent

Border

Border sits between padding and margin. It has width, style, and color properties.

Border Properties

border-width

1px, 2px, thin, medium, thick

border-style

solid, dashed, dotted, double, none

border-color

any color value

Shorthand

/* width | style | color */
border: 1px solid black;

/* Individual sides */
border-top: 2px dashed red;
border-right: 1px solid blue;
border-bottom: 3px double green;
border-left: 1px dotted purple;

Border Styles

solid

dashed

dotted

double

Border Radius

Rounds the corners of an element's border.

4px

8px

16px

50%

Practical Examples

1. Centering a Container

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

Centered container

2. Spacing Between Elements

.card + .card {
  margin-top: 16px;
}

/* Or use gap in flexbox */
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

Card 1

Card 2

Card 3

3. Card Component

.card {
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
}

.card-title {
  margin: 0 0 12px 0;
}

.card-content {
  margin: 0;
}

Card Title

This card uses padding for internal spacing and border-radius for rounded corners.

4. Button with Proper Spacing

.button {
  box-sizing: border-box;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  margin: 0;
}

.button:hover {
  border-color: currentColor;
}

Quick Reference

Property	Description
`margin`	Space outside the border
`margin-top`	Top margin only
`margin-right`	Right margin only
`margin-bottom`	Bottom margin only
`margin-left`	Left margin only
`padding`	Space inside the border
`padding-top`	Top padding only
`padding-right`	Right padding only
`padding-bottom`	Bottom padding only
`padding-left`	Left padding only
`border`	Border shorthand (width style color)
`border-width`	Border thickness
`border-style`	solid, dashed, dotted, etc.
`border-color`	Border color
`border-radius`	Rounded corners
`box-sizing`	content-box or border-box

About the Box Model

Every HTML element is represented as a rectangular box. The CSS box model describes how these boxes are sized and spaced.

Understanding the box model is fundamental to CSS layout. It affects everything from simple text spacing to complex grid designs.

Always use box-sizing: border-box globally for more intuitive and predictable sizing behavior.

Inspect any element's box model instantly

Frontend Hero's CSS Scanner shows you padding, margin, border, and all box model properties of any element on any website with just 2 clicks.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →