Display: block, inline, inline-block, and none

Before flexbox or grid ever enter the picture, every real HTML element already has a default display value that determines how it occupies space. This part covers that real foundation — necessary before parts 9 through 12 build actual layouts on top of it.

Block-level elements: real, full-width by default

/* the real, browser-default display value for these elements */
div, p, h1, h2, h3, section, article, header, nav, footer, ul, li {
  display: block;
}

A block-level element takes up the real, full available width of its parent by default, and forces a line break before and after itself — which is exactly why two real <p> elements never sit side by side without explicit styling telling them to. width, height, and all four sides of margin and padding (part 4) all apply fully and predictably to a block element.

Inline elements: real content-sized, no line breaks

/* the real, browser-default display value for these elements */
span, a, strong, em, img {
  display: inline;
}

An inline element takes up only the real, actual space its content needs, and doesn't force a line break — which is why several real <a> links can sit next to each other, wrapping naturally like real text. The real catch: width and height have no effect at all on an inline element, and only horizontal margin and padding genuinely affect layout — vertical margin and padding visually render but don't push surrounding content away the way they do on a block element.

Inline-block: a real, deliberate hybrid

.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background: var(--color-accent);
}

display: inline-block genuinely combines both behaviors — it flows inline with surrounding content like a real inline element, while fully respecting width, height, and all four sides of margin and padding like a block element. This is exactly the real, correct choice for something like a small tag or badge that needs real padding on every side while still sitting inline within a line of text.

display: none: real, complete removal — not just hiding

.mobile-menu {
  display: none;
}

@media (max-width: 860px) {
  .mobile-menu {
    display: block;
  }
}

An element with display: none is genuinely removed from the rendered layout entirely — it takes up zero space, as if it were never in the document at all, and it's also removed from the accessibility tree, meaning a screen reader skips it completely, not just visually hidden. This is real, correct, and exactly the mechanism behind responsive show/hide patterns like the media query above.

A real, genuine black-hat SEO risk hiding in this property

/* a real, documented black-hat technique */
.keyword-stuffing {
  display: none;
}

<div class="keyword-stuffing">
  best coffee subscription cheap coffee deals coffee near me...
</div>

Using display: none (or off-screen positioning, covered in part 13) to hide real, keyword-stuffed content from visitors while leaving it readable to search engine crawlers is a genuine, real black-hat technique the SEO series' own guidance on manipulative practices covers directly — and one modern search engines actively detect and penalize. display: none has entirely legitimate, honest uses (the mobile menu example above is a real, common one) — the distinction is intent: hiding content that's genuinely meant to appear conditionally is fine; hiding content that exists purely to manipulate rankings while never being meant for a real visitor to see is a real, documented violation.

Next: the real project's first layout system — Flexbox fundamentals, building Bright Leaf Coffee's actual header and navigation.