CSS Normal Flow — Block and Inline

Before applying Flexbox or Grid, the browser lays out elements in normal flow. Block elements stack vertically and stretch to the full available width. Inline elements sit in the text stream and do not break onto new lines. Inline-block sits in line flow but accepts explicit width and height like a box.

What this covers

display: block — stacks vertically, fills available width
display: inline — stays in text flow, no width/height control
display: inline-block — inline flow position with box-model sizing

HTML

<main class="stack">
  <h1>Normal Flow, Block, and Inline</h1>
  <p class="hint">This module explains default layout behavior before Flexbox or Grid.</p>
  <p class="callout">Your goal: understand browser default flow first, so later layout systems make sense.</p>
  <ul class="explain-list">
    <li><strong>Block:</strong> starts on a new line and expands across available width.</li>
    <li><strong>Inline:</strong> stays in text flow and does not start a new line.</li>
    <li><strong>Inline-block:</strong> sits inline but accepts width/height like a box.</li>
  </ul>

<section class="card stack">
    <h2>Block Elements</h2>
    
    <div class="demo-area">
      <div class="block-box">Block item A <span class="meta">display: block;</span></div>
      <div class="block-box">Block item B <span class="meta">new line + full row behavior</span></div>
      <div class="block-box">Block item C <span class="meta">stacked vertically</span></div>
    </div>
  </section>

<section class="card stack">
    <h2>Inline Elements</h2>
    
    <p class="demo-area">
      <span class="inline-box">inline A</span>
      <span class="inline-box">inline B</span>
      <span class="inline-box">inline C</span>
      <span class="meta">display: inline; all items flow on one text line.</span>
    </p>
  </section>

<section class="card stack">
    <h2>Inline-Block</h2>
    
    <div class="demo-area">
      <div class="inline-block-box">120px box <span class="meta">inline-block</span></div>
      <div class="inline-block-box">120px box <span class="meta">width applies</span></div>
      <div class="inline-block-box">120px box <span class="meta">still inline flow</span></div>
    </div>
  </section>
</main>

CSS

/* lesson.css base */
/* Shared design tokens used by all CSS demos.
   Project setup pattern: define tokens once in :root, then reuse with var(--token). */
:root {
  /* Surface/background colors */
  --bg: #f8fafc;
  --card: #ffffff;
  /* Text colors */
  --ink: #111827;
  --subtle: #4b5563;
  /* Border and accent colors */
  --line: #d1d5db;
  --accent: #0f766e;
}

/* Make element sizing predictable: width includes border/padding */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Base page styles reused by each lesson page */
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Content container */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* Generic content card */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
}

/* Vertical rhythm helper: adds top margin to siblings only */
.stack > * + * {
  margin-top: 0.75rem;
}

/* Secondary explanatory text */
.hint {
  color: var(--subtle);
  font-size: 0.95rem;
}

/* Short explanatory callout block for each lesson section */
.callout {
  border-left: 3px solid var(--accent);
  background: #f0fdfa;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  color: #134e4a;
  font-size: 0.92rem;
}

/* Bullet list used to explain what each demo element is showing */
.explain-list {
  margin: 0;
  padding-left: 1.2rem;
}

.explain-list li + li {
  margin-top: 0.35rem;
}

/* Inline CSS rule label shown inside demo elements */
.meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #475569;
}

/* Optional button helper class (not required in every demo) */
.button {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

/* lesson-specific */
/*
  Normal flow is the browser's default layout mode.
  Block elements stack vertically. Inline elements flow in a text line.
*/
.demo-area {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  background: #fff;
}

.block-box {
  display: block;
  border: 1px solid #99f6e4;
  background: #ecfeff;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.inline-box {
  display: inline;
  border: 1px solid #c4b5fd;
  background: #ede9fe;
  padding: 0.25rem;
}

.inline-block-box {
  display: inline-block;
  width: 120px;
  border: 1px solid #fcd34d;
  background: #fef3c7;
  padding: 0.5rem;
  margin-right: 0.25rem;
}

Preview

What this covers

Normal flow — block and inline specimen