Skip to content
Retr0 Academy
CSS

CSS · 2 min read

The Box Model

Every element is a box. Learn content, padding, border, and margin, plus box-sizing and display.

In CSS, every element is a rectangular box. Understanding that box is the single most important step to controlling layout.

From the inside out, each box has:

  1. Content: the text or image itself (width and height)
  2. Padding: space between the content and the border (inside the box)
  3. Border: a line around the padding
  4. Margin: space outside the border, pushing other elements away

css

.box {
  width: 200px;
  padding: 20px;
  border: 4px solid #1572B6;
  margin: 30px;
}
<div class="box">I am a box. Inspect me in DevTools!</div>
<div class="box">Another box.</div>

Edit this example in the Playground.

Open in Playground

Open DevTools and hover over a box: the browser highlights content, padding, border, and margin in different colors.

Margin, border, padding, content: from the outside in.
Margin, border, padding, content: from the outside in.

Shorthand for sides

css

margin: 10px;                /* all four sides */
margin: 10px 20px;           /* top & bottom | left & right */
margin: 10px 20px 30px;      /* top | left & right | bottom */
margin: 10px 20px 30px 40px; /* top | right | bottom | left (clockwise) */
margin-top: 5px;             /* just one side */

Padding works exactly the same way.

box-sizing: the most useful reset

By default, width sets only the content width. Padding and border are added on top, so a width: 200px box with 20px padding and a 4px border is actually 248px wide. Confusing!

box-sizing: border-box makes width include padding and border:

css

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

Borders and rounded corners

css

.card {
  border: 2px dashed hotpink;   /* width style color */
  border-radius: 12px;          /* rounded corners */
}
.avatar { border-radius: 50%; } /* a perfect circle (on a square) */

Centering a block

A block with a set width can be centered horizontally with auto margins:

css

.container {
  max-width: 960px;
  margin: 0 auto;
}

Margin collapse

When two vertical margins touch, they collapse into one, using the larger value. A paragraph with margin-bottom: 20px followed by one with margin-top: 30px ends up 30px apart, not 50px.

The display property

display changes how a box behaves in the layout:

ValueBehavior
blockStarts on a new line, takes full width (div, p, h1)
inlineFlows within text; width/height are ignored (span, a)
inline-blockFlows within text but respects width/height
noneRemoved from the page entirely
flex / gridTurns the box into a layout container (next lessons!)
<p>Some <span class="pill">inline-block</span> pills inside a <span class="pill">sentence</span> of text.</p>
<div class="hidden">You cannot see me.</div>

Edit this example in the Playground.

Open in Playground

Summary

  • Every element is a box: content, padding, border, margin.
  • Use box-sizing: border-box so widths include padding and border.
  • Shorthands go clockwise: top, right, bottom, left.
  • display controls whether a box is block, inline, hidden, or a layout container.
Open in Playground

Saved in this browser.

Colors, Backgrounds, and UnitsTypography and Text