The Box Model: Giving Your Sections Room to Breathe

Your page has type now: a chosen font, a sized name, spaced-out paragraphs. Every section still has text pressed against its own edge, and none of the spacing between sections is spacing you chose. This lesson gives your sections room inside them, a border where you choose one, and space between them.

The concept

Here is your page as it stands. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat">GitHub</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

Look closely at the grey sections. The text presses against each box's edge, and none of the spacing between sections is spacing you chose. Here are two boxes with the same problem, stripped down to their backgrounds alone. Run it.

TWO BOXES WITH NOTHING SEPARATING THEM · HTML

Untitled

RUN TO SEE YOUR PAGE

Both boxes show text pressed against the edge. Nothing you wrote created the space between them, or the room inside them. Now run the same two boxes, with three new rules added.

THE SAME TWO BOXES, AFTER THREE NEW RULES · HTML

Untitled

RUN TO SEE YOUR PAGE

Same two boxes, same text. The text now sits clear of each box's own edge, a border frames each box, and a visible gap separates one from the next. Three rules did all of that: padding, border, and margin, the properties this lesson teaches.

One more thing is worth seeing before the terms get formal. Run this single box.

WHERE THE BACKGROUND FILL ACTUALLY STOPS · HTML

Untitled

RUN TO SEE YOUR PAGE

The grey fill stops exactly at the teal border. Past that border, the space is the page's own white background, not the box's. Margin is transparent: it pushes neighbours away without painting anything itself.

The syntax

Every element on your page renders as a rectangular box, built from four layers, from the inside out:

Content: the text or elements themselves.
Padding: space between the content and the border, filled with the element's own background.
Border: a visible line drawn around the padding.
Margin: transparent space outside the border, between this element and its neighbours.

padding most often takes one size, applied to every side at once.

.block {
  padding: 1.5rem;
}

border is a shorthand for three values on one line: width, style, and colour, conventionally written in that order, though the browser accepts any.

#skills {
  border: 2px solid teal;
}

Drop the style keyword, such as solid, and the border usually fails to render at all, even with a width and colour set. The browser has no line style to draw.

margin works the same way as padding. Write one size for every side, or name a single side directly.

.block {
  margin-bottom: 1.5rem;
}

margin-bottom only affects the space below the element. margin-top, margin-left, and margin-right each control their own side.

By default, padding and border each add extra size on top of the width you set. A later property named box-sizing can change that rule.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Box model</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="card">
      <p>About</p>
    </section>
  </body>
</html>

styles.css

.card {
  background-color: rgb(237, 242, 244);
  padding: 1.5rem;
  border: 2px solid teal;
  margin-bottom: 1.5rem;
}

One section, three rules: room inside the box, a visible edge, and space to whatever comes next.

Common mistakes

You add padding: 2rem; to .block, expecting space between your sections, and the grey boxes still touch. Run it:

MORE PADDING, SAME TOUCHING BOXES · HTML

Untitled

RUN TO SEE YOUR PAGE

Padding is measured inside a box's own border. Adding more of it only makes the box thicker. It never reaches past that border to push a neighbouring box away. For space between two separate elements, use margin instead.

You set margin-bottom: 1.5rem on one section and margin-top: 1.5rem on the very next one, expecting 3rem of space between them. Run it:

1.5REM PLUS 1.5REM, AND A 1.5REM GAP · HTML

Untitled

RUN TO SEE YOUR PAGE

The gap measures 1.5rem, not 3rem. Vertical margins between adjacent elements collapse into one gap, sized to the larger of the two values, not their total. Setting the space on only one side of that boundary gives the same visible result, with one less value to track.

You give a box width: 200px, add padding: 20px and a 2px border, and it renders wider than 200px on screen. Run it:

A 200PX BOX THAT RENDERS WIDER THAN 200PX · HTML

Untitled

RUN TO SEE YOUR PAGE

By default, width sets only the content area. Padding and border each add their own size on both sides, on top of that. This box renders at 244px, not 200px. Plan extra room for padding and border whenever you set a fixed width on something.

Try it yourself

Your sections still have text pressed against each section's edge, and none of the spacing between them is spacing you chose. Give them room.

Run the starting code below. Confirm the text in each section presses against that section's edge, and that none of the spacing between sections is spacing you chose.
On .block, add padding: 1.5rem;. Run it. Confirm the heading and text inside every section now sit clear of the grey box's edge.
On .block, add margin-bottom: 1.5rem;. Run it. Confirm a visible gap now separates each section from the next.
Scroll the preview to Skills if you do not see it yet. Confirm its teal border now sits with real space between it and the padded text inside, instead of pressing right against it.
Break it on purpose: also add margin-top: 1.5rem; to .block, expecting the gap between sections to grow to 3rem. Run it. Confirm the gap stays at 1.5rem.
Fix it: remove that margin-top line, keeping only margin-bottom. Run it. Confirm the spacing returns to a single, predictable 1.5rem between sections.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your sections now have room inside them, a border with space around it, and a gap between one section and the next. They no longer sit flush against their neighbours. The next lesson turns to how elements sit within the page's flow itself: block, inline, and inline-block.