Normal Document Flow

Normal Document Flow

Before you can position elements, you need to understand how the browser places them by default. This default layout is called normal document flow (or just "normal flow").

What Is Normal Flow?

Normal flow is the browser's default layout algorithm. Without any CSS positioning, elements are placed in the order they appear in the HTML, following these rules:

• Block elements stack vertically, one after another
• Inline elements sit side by side horizontally, wrapping when the line is full

Block-Level Elements

/* Block elements take the full width and stack vertically */
<div>Block 1</div>
<p>Block 2</p>
<h2>Block 3</h2>
<section>Block 4</section>

┌──────────────────────────────────────┐
│           Block 1 (div)              │
├──────────────────────────────────────┤
│           Block 2 (p)               │
├──────────────────────────────────────┤
│           Block 3 (h2)              │
├──────────────────────────────────────┤
│           Block 4 (section)         │
└──────────────────────────────────────┘
Each takes the FULL available width.
Each starts on a NEW LINE.

Common Block Elements

Element	Purpose
<div>	Generic container
<p>	Paragraph
<h1> – <h6>	Headings
<section>	Section of content
<article>	Self-contained content
<header>, <footer>	Page/section header and footer
<ul>, <ol>, <li>	Lists
<form>	Form container

Inline Elements

/* Inline elements sit side by side on the same line */
<p>This is <strong>bold</strong> and <em>italic</em> and 
<a href="#">a link</a> all on the same line.</p>

┌──────────────────────────────────────────────┐
│ This is [bold] and [italic] and [a link]     │
│ all on the same line.                        │
└──────────────────────────────────────────────┘
Inline elements only take as much width as their content.
They DON'T start on a new line.

Common Inline Elements

Element	Purpose
<span>	Generic inline container
<a>	Hyperlink
<strong>	Bold emphasis
<em>	Italic emphasis
<img>	Image (inline by default)
<code>	Code snippet

Block vs Inline — Key Differences

Feature	Block	Inline
Starts on new line	✅ Yes	❌ No
Takes full width	✅ Yes	❌ Only content width
width/height work	✅ Yes	❌ Ignored
Vertical margin/padding	✅ Works normally	❌ Doesn't push other elements
Horizontal margin/padding	✅ Works	✅ Works

Inline-Block — The Hybrid

.badge {
    display: inline-block;
    /* Inline: flows with text, sits on the same line
       Block: width, height, and vertical margin/padding all work */
    padding: 4px 12px;
    width: 100px;
    text-align: center;
}

Changing Display Type

/* Make a block element inline */
li { display: inline; }

/* Make an inline element block */
a { display: block; }

/* Make anything inline-block */
span { display: inline-block; }

Key Takeaways

• Normal flow is the browser's default layout — no CSS positioning needed
• Block elements stack vertically and take full width
• Inline elements flow horizontally within text and take only content width
• inline-block combines both: flows inline but accepts width/height
• You can change any element's display type with the display property
• Understanding flow is essential — positioning takes elements out of flow