Display Values — block, inline, and inline-block

You have learned how the box model works. The display property controls whether the box model properties apply — and how the element participates in page flow. Understanding display explains why padding works on a <div> but not on a <span>, and why nav links sometimes won’t accept height settings.

display: block

Block elements:

• Take up the full available width (they stretch to fill their container)
• Start on a new line — other elements flow above and below, not beside
• Respect all box model properties: width, height, margin (all sides), padding (all sides)

Common block elements by default: <div>, <p>, <h1>–<h6>, <section>, <article>, <header>, <footer>, <ul>, <li>, <form>

.tour-card {
  display: block; /* this is already the default for div */
  width: 300px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

The analogy: block elements are like paragraphs — each one occupies its own row regardless of how wide it is.

display: inline

Inline elements:

• Take only as much width as their content needs — they do not stretch
• Flow with text — they sit inline, like words in a sentence
• Ignore width and height
• Ignore margin-top and margin-bottom (top/bottom margin has no effect)
• Apply padding visually on all sides but vertical padding does not push surrounding content (it overlaps it)

Common inline elements by default: <span>, <a>, <strong>, <em>, <img> (mostly), <label>, <button> (sort of)

a {
  display: inline; /* already the default for anchor tags */
  color: #2c4a1e;
}

The analogy: inline elements are like words in a sentence — they sit next to each other on the same line and only break to a new line when they run out of space.

display: inline-block

inline-block combines the best of both:

• Flows inline — sits beside other inline or inline-block elements on the same line
• Respects all box model properties — width, height, top/bottom margin, all padding

This makes it the right choice when you want elements to sit side by side but also respond correctly to explicit sizing:

.nav-link {
  display: inline-block;
  padding: 0.5rem 1rem; /* top/bottom padding now works correctly */
}

Without inline-block, applying padding-top and padding-bottom to <a> tags in a nav would visually add space but not push surrounding content down — the clickable area appears padded but the layout does not respond. With inline-block, the padding properly expands the element and the layout.

display: none

display: none removes the element from the page entirely. It is as if the element does not exist — it takes up no space and is invisible.

.hidden {
  display: none;
}

This is different from visibility: hidden, which hides the element visually but keeps its space in the layout:

.invisible-but-present {
  visibility: hidden; /* invisible, but still takes up space */
}

display: none is commonly used to show/hide elements with JavaScript, or to hide certain elements on different screen sizes with media queries.

Common browser defaults

Every browser has a built-in stylesheet (the user agent stylesheet) that sets default display values:

Element	Default display
div, p, section, article	block
h1–h6	block
ul, ol, li	block
span, a, strong, em	inline
img	inline (treated mostly as inline-block in practice)
button	inline-block
input, select	inline-block

You can override any of these defaults. Changing <li> to display: inline-block is a classic technique for making horizontal navigation lists.

Exercise

Apply display changes to two areas of the Summit Trail Outfitters site:

1. Navigation links with proper padding — the nav links are <a> tags, which are inline by default. Change them to inline-block so vertical padding expands the clickable area correctly:

.site-nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #f5f0eb;
  text-decoration: none;
}

Compare the nav link height before and after — with inline-block, the padding genuinely expands the link’s hit area, not just its visual appearance.

2. Horizontal badge row — find or add a set of tag or category labels (e.g., difficulty badges on tour cards). By default, <span> elements are inline. They will already sit in a row, but cannot accept explicit sizing. Apply inline-block and add padding:

.tour-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #d0e8c5;
  border-radius: 12px;
  font-size: 0.85rem;
  margin-right: 0.5rem;
}

Inspect both elements in DevTools. In the Styles panel, look for the display value and try toggling between inline, block, and inline-block to see how the element’s behavior changes.

Recap

• display: block — takes full width, starts on a new line, respects all box model properties.
• display: inline — flows with text, ignores width/height, vertical margin has no effect.
• display: inline-block — flows inline but respects all box model properties.
• display: none — removes the element from layout entirely (vs visibility: hidden which hides but keeps space).
• Browser default display values: most structural elements are block; text-level elements like <span> and <a> are inline.

Lesson 06 — the final lesson of this module — covers overflow: what happens when your content is too big for its container, and how to control or contain it.