Block and Inline Layout in Normal Flow

Introduction: Understanding Normal Flow

Normal flow is the default way browsers lay out HTML elements when no CSS positioning or layout modifications are applied. Every element in a document belongs to a formatting context--either block or inline--and these contexts determine how elements behave and interact with each other.

Understanding normal flow is fundamental to CSS layout because it provides the baseline from which all other layout techniques build. Whether you're using modern approaches like Flexbox and Grid or classic techniques like floats, the principles of normal flow underpin everything.

The CSS 2.1 specification defines normal flow as comprising block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of both block-level and inline-level boxes. Our web development services team applies these foundational principles daily when building responsive, standards-compliant websites.

Block Formatting Contexts

What Makes an Element Block-Level

Block-level elements are those that visually format as blocks in the document--think of paragraphs, headings, divs, and lists. These elements generate a principal block-level box that contains descendant boxes and any generated content. The display property values that make an element block-level include block, list-item, and table.

Block-level elements participate in a block formatting context, which governs how their boxes are laid out relative to siblings and descendants. In a block formatting context, boxes are laid out one after another vertically, beginning at the top of the containing block. The vertical distance between sibling boxes is determined by their margin properties, and adjacent vertical margins between block-level boxes collapse.

Each block-level box's left outer edge touches the left edge of its containing block (in left-to-right formatting), creating the familiar behavior where block elements stretch full-width by default.

Margin Collapsing

Understanding Vertical Margin Collapse

Margin collapsing is one of the most important yet frequently misunderstood aspects of CSS layout. When two adjacent block-level boxes in the same block formatting context have vertical margins, those margins combine (collapse) into a single margin. The resulting margin size is the larger of the two collapsing margins, not their sum.

The classic example involves paragraphs. If you have two paragraphs where the first has a bottom margin of 40 pixels and the second has a top margin of 20 pixels, the space between them is not 60 pixels as you might expect. Instead, the margins collapse and the space between paragraphs becomes 40 pixels--the larger margin.

Several conditions prevent margin collapsing:

• Padding or borders between the margins
• Clearance added to push elements past floats
• Different formatting contexts (overflow: hidden creates a new BFC)
• Floated or absolutely positioned elements
• display: inline-block elements

Understanding margin collapsing is essential for precise spacing in any professional web development project.

Inline Formatting Contexts

Inline-Level Elements and Inline Boxes

While block elements create structure and flow vertically, inline-level elements handle content that flows within lines of text. Elements like strong, em, span, and images are inline-level by default--they don't create new block boxes but instead participate in their parent's inline formatting context.

Inline boxes are both inline-level and have contents that participate in their containing inline formatting context. A non-replaced element with display: inline generates an inline box. These boxes flow horizontally within their containing block, wrapping to new lines when they reach the container's edge.

Not all inline-level boxes are inline boxes. Replaced elements (images), inline-block elements, and inline-table elements generate atomic inline-level boxes--boxes that participate in inline formatting as single, indivisible units. Unlike inline boxes, atomic inline-level boxes never split across line boxes.

The Display Property and Flow Layout

Display Values That Control Flow Behavior

The display property is the primary control for determining how an element generates boxes and participates in formatting contexts:

• display: block -- Makes an element generate a block-level box that participates in block formatting. The element creates line breaks before and after itself.

• display: inline -- Makes an element generate one or more inline boxes. The element flows within text content without creating line breaks.

• display: inline-block -- Creates an element that generates an inline-level block container. The inside is formatted as a block, but the element itself flows inline.

Display: inline-block

The inline-block value creates an element that generates an inline-level block container. The inside of an inline-block is formatted as a block box, while the element itself is formatted as an atomic inline-level box. This combination is useful for creating layouts that need block-level content organization but inline-level positioning.

An inline-block element accepts width, height, padding, borders, and margins like a block element, but it doesn't create line breaks before and after itself. Multiple inline-block elements will sit on the same line if there's enough horizontal space, wrapping to new lines as needed. This technique is foundational for creating modern responsive layouts without relying on framework-specific utilities.

Anonymous Boxes and Implicit Structure

Anonymous Block Boxes

HTML documents don't always contain perfectly nested elements with matching display types. When a block container contains both inline content and block-level content, the browser creates anonymous block boxes to wrap the inline content so it participates correctly in block formatting.

Consider a div containing both plain text and a paragraph. The div has display: block, and the paragraph also has display: block, but the plain text between them is not wrapped in any block element. The browser creates an anonymous block box around the plain text so that the div's content consists entirely of block-level boxes.

Anonymous Inline Boxes

Similarly, when text appears directly inside a block container without being wrapped in an inline element, anonymous inline boxes are generated. In a paragraph containing emphasized text, the words wrapped in <em> generate an inline box, but the surrounding words generate anonymous inline boxes. These anonymous boxes inherit properties from their parent block element, such as font and color.

Normal Flow and Positioning Schemes

The Three CSS Positioning Schemes

CSS defines three positioning schemes that determine how boxes are laid out:

1. Normal Flow -- The default. Includes block formatting, inline formatting, and relative positioning.

2. Floats -- Elements are first laid out according to normal flow, then shifted left or right. Content flows around floats.

3. Absolute Positioning -- Elements are removed from normal flow entirely. Positioned relative to their containing block.

Relative Positioning Within Normal Flow

Relative positioning is considered part of normal flow even though it moves elements from their normal position. When an element has position: relative, it's first laid out according to normal flow, then offset by the top, right, bottom, and left properties.

The space originally reserved for the element remains reserved, and following elements are positioned as if the relatively positioned element hadn't moved. This behavior can cause overlapping, which is both a feature (for small adjustments) and a consideration (for layout predictability).

Once you've mastered normal flow fundamentals, exploring advanced techniques like CSS Flexbox and CSS Grid will open up more sophisticated layout possibilities.

Sources

• MDN Web Docs: Block and inline layout in normal flow
• W3C CSS 2.1 Specification: Visual formatting model
• MDN Web Docs: Mastering Margin Collapsing
• MDN Web Docs: Flow layout and writing modes