FSM Full Stack Masterclass
Platform under construction
CSS course badge

Box Model

Intermediate

Display

display controls how an element participates in layout. It decides whether a box behaves like a block, inline content, flex container, grid container or disappears entirely.

.nav {
  display: flex;
  gap: 1rem;
}

Box Model

display changes the layout role of an element.

HTML elements have default display behavior. A paragraph is block by default. A link is inline by default. A div is block by default. CSS can change that behavior.

display is often the bridge between the box model and real layout. Once an element becomes flex or grid, its children enter a new layout system.

Changing display can also affect accessibility and document flow. display: none removes content visually and from the accessibility tree.

block

Starts on a new line and takes available inline space by default.

inline

Flows with text. Width and height do not behave like block boxes.

inline-block

Flows inline but accepts width, height, padding and margin more like a box.

flex / grid

Creates a layout context for children. This is where modern layout begins.

Visual model

See the box before you change the CSS.

Layout debugging becomes much easier when you can point to the exact part of the box that creates the visual result: inner space, outer space, edge, size or overflow behavior.

block

Page sections, paragraphs and cards stack in normal flow.

inline

Links and text-level elements flow inside a line.

flex

One-dimensional alignment for rows or columns.

grid

Two-dimensional placement for rows and columns.

Examples

Professional spacing is deliberate, not decorative guesswork.

Display chosen for the layout job

.nav-list {
  display: flex;
  gap: 1rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

Display used as a random fix

.nav a { display: block; margin-left: 43px; }
.cards article { display: inline; width: 300px; }
.error { display: none; /* message is gone */ }

CSS quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Production pattern

CSS pattern 1

A clean version of the pattern from this lesson. Use it as the first place to check syntax and structure.

.nav-list {
  display: flex;
  gap: 1rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
What this gives you

A readable pattern you can adapt without copying a weak shortcut.

Focused syntax

CSS pattern 2

The smallest useful version of the topic. This is the quick reminder when you only need the shape of the code.

.nav {
  display: flex;
  gap: 1rem;
}
What this gives you

A compact syntax reference for scanning, searching and reuse.

Editable CSS starter

CSS pattern 3

The CSS from the live lab. Change one declaration at a time and watch how the interface responds.

body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #07111f; font-family: Inter, system-ui, sans-serif; }
.nav {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 999px;
  background: #101827;
  border: 1px solid #263247;
}
.nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 18px;
  border-radius: 999px;
  background: #162033;
  color: white;
  font-weight: 900;
}
What this gives you

A practical starter block for experimentation.

Rules that matter

Make every spacing and sizing decision explainable.

Box model CSS should make the interface easier to reason about. When a value cannot be explained, it usually becomes a future layout bug.

Know default display

Do not change display before understanding what the element already does.

Use block for structure

Major layout areas usually behave as blocks.

Use inline for text-level meaning

Links and emphasis usually belong in text flow.

Use flex for one axis

Flex is excellent for alignment in rows or columns.

Use grid for two axes

Grid is stronger when rows and columns both matter.

Use display none carefully

It removes content from visual layout and accessibility exposure.

Production thinking

The box model is where visual polish becomes maintainable CSS.

Why does this matter?

display is the first serious layout switch. Choose it well and the rest of the CSS becomes simpler.

Accessibility

display: none hides content from assistive technologies. Use it only when content should genuinely be unavailable.

Production note

Document display decisions in components. A button, navigation list and card grid should not rely on accidental defaults.

SEO note

Important content should not be hidden with display: none as a content strategy.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

  • Change .nav display from flex to block.
  • Change .nav a display to inline and notice sizing behavior.
  • Use display: grid on .nav and create three equal columns.

Practice assignment

Do this before moving to the next lesson.

  1. List the default display behavior of p, a, div and img.
  2. Create one flex navigation and one grid card layout.
  3. Explain why display: none should be used carefully.

Try it yourself

Switch display and watch layout change

Live preview

Self-check

Before you continue, prove that you understand Display.

Intermediate

Answer these questions before moving on. If the answer is vague, change the lab CSS and inspect the box again.

  1. Can you explain what display controls?
  2. Can you distinguish block and inline behavior?
  3. Can you choose flex or grid based on the layout problem?
  4. Can you explain what display: none does to accessibility?
  5. Can you debug a layout by checking computed display first?

Senior audit upgrade

display: none removes content from users too.

When an element has display: none, it is not visible and is generally removed from the accessibility tree.

Use intentionally

display: none is right for inactive views or closed panels, not for text screen readers still need.

Visually hidden

Use a visually-hidden utility when content should remain available to assistive tech.

Layout mode

Changing display also changes how children participate in layout.

Chapter project

Create resilient pricing blocks

Use sizing, padding, borders, overflow and display choices to keep cards stable with real content.

Build

three pricing cards that survive long text and narrow screens

Deliverables

  • three pricing cards
  • long-content test
  • overflow decision

Quality checks

  • border-box sizing
  • no fixed text heights
  • spacing survives narrow screens

Review question

Does the layout still work when one card has twice as much text?