Chapter 3: Document flow and the box model

Introduction

The introduction explains why document flow and the box model are foundational to understanding page layout.

• Layout Fundamentals: Explain why document flow and the box model matter when learning CSS layout: they are basic rules that determine where elements appear and how large they are.
  Why it matters: These fundamentals give you a basis for understanding more complex layouts.

Key terms: document flow, box model, layout

3.1 Normal document flow

Introduces normal document flow and explains why width and height behave differently in a page layout.

• Inline and block flow: Distinguish how inline and block-level elements behave in normal document flow.
  Why it matters: These defaults explain the page’s layout before you change its sizing or positioning.
• Width and height dependence: Explain why parent and child sizes influence width and height in opposite directions under normal document flow.
  Why it matters: This distinction explains why width and height call for different layout approaches.

Key terms: normal document flow, inline elements, block-level elements, constrained width, unlimited height, parent element, child elements

3.1.1 Centering content horizontally

This section shows how to center a page’s main content and align its header using constrained inner containers and automatic horizontal margins.

• Outside-in layout approach: Explain why page layout should begin with the larger DOM elements before their children.
  Why it matters: A rough layout gives you a stable starting point for styling the elements inside it.
• Double-container centering pattern: Describe how nested containers and automatic left and right margins center a constrained block, and how the pattern keeps the header aligned with the main content.
  Why it matters: This is a simple way to center page content while keeping the header and main column aligned.
• Responsive maximum width: Explain why the inner container uses max-width rather than a fixed width, including what happens in narrow and wide viewports.
  Why it matters: A centered column can remain usable on small screens instead of forcing sideways scrolling.

Key terms: higher-level DOM elements, outside in, double-container pattern, auto, container, custom property, max-width, viewport, horizontal scrolling

3.1.2 Using logical properties

This section explains how CSS logical properties describe size and spacing relative to writing direction, so layouts can adapt to different languages and writing modes.

• Block and inline directions: Explain how logical properties use the direction of text and the direction in which boxes stack instead of fixed horizontal and vertical directions, and how this lets sizes adapt to vertical writing modes.
  Why it matters: Thinking in block and inline directions makes a layout less dependent on one writing mode.
• Writing-relative edges and alignment: Describe how logical properties replace fixed physical sides with inline or block start and end, using an example such as padding-inline-start or border-block-end.
  Why it matters: Writing-relative edges let spacing and borders follow the content’s reading direction.
• Choosing logical or classic properties: Explain why logical properties are useful even on a one-language site, and when a classic physical property may still be appropriate.
  Why it matters: The choice depends on whether a style should follow writing direction or remain physically fixed.
• Logical properties in the cascade: Explain how a classic property and its equivalent logical property can override one another through the normal CSS cascade.
  Why it matters: You can mix the two naming approaches without creating a separate set of precedence rules.

Key terms: logical properties, inline base direction, block flow direction, inline-size, block-size, writing modes, start, end, padding-inline-start, padding-inline-end

3.1.3 Adopting useful shorthand logical properties

This section shows how logical shorthand properties simplify axis-specific CSS without changing the page’s appearance.

• Axis-specific logical shorthands: Explain how margin-inline and margin-block set margins on one axis without setting margins on the other, including how one or two values are assigned.
  Why it matters: These shorthands make it easier to specify spacing on just one axis.
• Appearance-preserving logical refactor: Describe why the section applies logical properties to the double-container pattern and replaces max-width with max-inline-size.
  Why it matters: It clarifies that the proposed rewrite simplifies the CSS rather than introducing a new visual design.

Key terms: margin-inline, margin-block, start, end, padding-inline, padding-block, double-container pattern, max-width, max-inline-size, authoring convenience

3.2 The box model

This section explains how the default box model determines an element’s rendered size, then distinguishes outlines and a special case for inline elements.

• Default box model sizing: Explain the four areas of an element’s box and how the default width calculation accounts for padding and borders. Apply that explanation to why adding padding to the page header’s <h1> did not narrow its content on wider screens.
  Why it matters: It explains why adding padding can unexpectedly increase an element’s size instead of shrinking its content.
• Outline versus border: Distinguish an outline from a border in its effect on element size and layout, and describe how outline-offset moves it.
  Why it matters: An outline can mark an element without changing its size or shifting the page layout.
• Inline vertical spacing: Describe the unusual effect of top and bottom padding or margins on an inline element and state what using inline-block changes.
  Why it matters: It helps explain why vertical spacing on inline text may not enlarge its containing line as expected.

Key terms: box model, content area, padding area, border area, margin area, outline, border, outline-offset, inline elements, line-height

3.2.1 Avoiding magic numbers

The section explains why guessing a smaller width is unreliable and shows how to account for padding with a calculated width instead.

• Magic numbers and calculated widths: Explain why changing an element’s percentage width until it looks right creates a magic number, and describe how calc() can account for the heading’s padding instead.
  Why it matters: Accounting for the cause of a sizing problem is more dependable than tweaking a value until one screen looks right.

Key terms: magic number, calc(), padding, --columns-width

3.2.2 Adjusting the box model

Explains how changing box-sizing from content-box to border-box makes specified dimensions include padding and borders, correcting a heading’s alignment.

• Border-box sizing and alignment: Explain how content-box and border-box interpret specified dimensions, and describe why applying border-box to the heading aligns its text with the main content.
  Why it matters: Border-box makes specified sizes more predictable when an element has padding or borders.

Key terms: box-sizing, content-box, border-box, padding, border, width

3.2.3 Using universal border box sizing

This section recommends a universal border-box rule to make element sizing predictable, while warning that adding it to an existing stylesheet can cause bugs.

• Universal border-box sizing: Explain how to apply the border-box fix across a page and what it changes about element sizing.
  Why it matters: Applying the fix once makes sizing more predictable throughout a site.
• Existing stylesheet migration risk: Explain why adding the universal border-box fix to an existing project calls for a review.
  Why it matters: A useful default for a new site may change layouts that were built around content-box sizing.

Key terms: universal selector (*), pseudo-element, border-box fix, default content box model, existing stylesheet

3.3 Element height

Explains why element height is usually content-driven in normal document flow and why explicit heights can be troublesome.

• Content-driven element height: Explain why a container’s height is normally determined by its content and why setting an explicit height is often best avoided, especially when the element has a lot of content.
  Why it matters: Letting content determine height helps you avoid imposing an unnecessary constraint on content-heavy elements.

Key terms: normal document flow, height, block size, explicit height

3.3.1 Controlling overflow behavior

This section explains why constrained content can overflow, how CSS controls its visibility and scrolling, and why nested scrollbars should be used carefully.

• Overflow and document flow: Explain how an explicitly set height can cause content to overflow and what happens to following content.
  Why it matters: A fixed height can create an overlap even when the following content is in normal document flow.
• Overflow value behaviors: Distinguish the five overflow values by whether excess content remains visible, is clipped, or can be reached by scrolling.
  Why it matters: Choosing an overflow value determines whether users can see or reach content that does not fit.
• Horizontal and vertical overflow: Describe how to control overflow on one axis and the caution about combining different axis settings.
  Why it matters: An overflowing URL or wide table may need attention on the horizontal axis rather than the vertical one.
• Nested scrollbar tradeoff: Justify using scrollbars judiciously, including why auto is often preferable to scroll.
  Why it matters: Scrollbars solve an overflow problem but can make the page awkward to navigate.

Key terms: overflow, document flow, visible, hidden, clip, scroll, auto, horizontal overflow, vertical overflow, overflow-x

3.3.2 Using alternatives to percentage-based heights

Explains why percentage-based heights often fail and identifies better approaches for filling a screen and making equal-height columns.

• Percentage height dependency: Explain why a percentage height is often ignored and what the parent needs for it to work.
  Why it matters: This explains why setting height: 100% on an element may have no effect.
• Alternatives for common height goals: Describe the alternatives suggested for filling the screen and for creating side-by-side columns of equal height.
  Why it matters: Choosing an approach that matches the layout goal avoids fragile percentage-height workarounds.

Key terms: percentage-based heights, containing block, explicitly defined height, viewport-relative units, 100 svh/lvh, height: 100%, flexbox, grid

3.3.3 Using min-height and max-height

This section explains how minimum and maximum size properties let elements size naturally within limits, and what happens when content exceeds those limits.

• Minimum height and content growth: Explain how min-height differs from a fixed height: it sets a floor, but the element can grow taller when its content needs more room.
  Why it matters: Using a minimum height can preserve a desired size without creating overflow when content grows.
• Maximum size and overflow: Distinguish max-height from min-height by describing its upper limit and what happens to content when that limit is reached; identify the corresponding width constraints.
  Why it matters: A maximum size limits the box, but it does not guarantee that all its content will fit.

Key terms: min-height, min-block-size, overflow, max-height, max-block-size, min-width, max-width, min-inline-size, max-inline-size

3.4 Negative margins

Explains how negative margins affect an element or nearby content, and how they can make a block-level element extend beyond its container.

• Negative margin direction effects: Distinguish how negative left, top, and bottom margins affect an element and nearby content, and how a negative right margin affects successive inline content.
  Why it matters: The side you choose determines whether the element moves or following content is pulled toward it.
• Block bleed beyond containers: Explain how negative horizontal margins can make a block-level element wider than its container, and describe the image-bleed use and small-screen risk.
  Why it matters: This creates a wider visual element without widening its container, but it needs checking on small screens.
• Overlap technique cautions: Explain why negative margins require care when used to overlap elements.
  Why it matters: An overlap that looks right can still make a control impossible to click.

Key terms: negative margin, document flow, inline elements, block-level element, negative right margin, negative left margin, bleed, container, browser viewport, negative margins

3.5 Collapsed margins

This section introduces collapsed margins as the reason a gap can appear below a header even when no margin was applied to the header or its container.

• Adjoining vertical margin collapse: Explain that adjoining top and/or bottom margins can overlap and combine into a single margin, producing a gap such as the one below the header.
  Why it matters: It helps explain a visible gap that the header’s or container’s own margin declarations do not account for.

Key terms: adjoining margins, collapsing, top and bottom margins

3.5.1 Collapsing between text

This section explains why margins between adjacent blocks of text overlap and how to determine the resulting gap.

• Collapsed margins between text blocks: Explain that adjacent text blocks’ vertical margins overlap rather than add together, leaving a gap equal to the larger margin. Apply this rule to the heading and paragraph example.
  Why it matters: It explains why spacing between text blocks can be smaller than the sum of their CSS margins.

Key terms: collapsed margins, top margin, bottom margin

3.5.2 Collapsing multiple margins

This section explains how multiple adjacent margins collapse across nested elements and why that makes vertical spacing predictable.

• Multiple margin collapse: Explain how adjacent top and bottom margins can collapse together even when elements are nested, and describe which margin determines the resulting space.
  Why it matters: It helps you predict spacing without adding together every margin in a nested layout.
• Predictable spacing between elements: Describe why collapsed margins let you set spacing on an element without usually needing to account for the margins of whatever follows it.
  Why it matters: It lets you choose consistent spacing for headings without tailoring it to every following element.

Key terms: adjacent top and bottom margins, collapsed margins, collapsed margin, bottom margin, top margin

3.5.3 Collapsing outside a container

Explains why a heading’s margins can collapse outside its header and how to prevent the resulting spacing problems.

• Margins escaping a container: Explain why the page title creates a gap outside the header even though the header has no margin.
  Why it matters: It explains why space can appear outside a container rather than within its background.
• Padding around the heading: Describe how to keep the heading’s margins from collapsing outside the header and choose what provides the desired space around its text.
  Why it matters: This keeps the intended space within the header’s background without adding more space than needed.
• Other collapse prevention options: Describe other ways the section gives to prevent margins from collapsing, and explain why they are not all interchangeable fixes.
  Why it matters: It helps you choose a collapse fix without accidentally changing the layout in an unwanted way.

Key terms: margin collapsing, container, user-agent styles, padding, overflow: auto, border, flexbox, grid layout

3.6 Spacing elements within a container

The section shows how to space a series of links inside a padded container without adding unwanted space above the first link.

• Spacing inside padded containers: Explain why adding a top margin to every button-link creates uneven spacing, and how an adjacent sibling selector puts margin only between the links.
  Why it matters: It gives you a reusable way to space elements without disturbing the padding around the group.
• Block layout for links: Describe the layout effect of making the social links block elements.
  Why it matters: It establishes the stacked button layout whose spacing the section adjusts.

Key terms: container padding, margin-top, adjacent sibling combinator (+), button-link, block elements, container

3.6.1 Considering changing content

This subsection shows why adding margins to individual sidebar items becomes fragile when the content changes.

• Spacing with changing content: Explain why adding a top margin to the sponsor link would fix the current gap but create maintenance work when sidebar items are moved, replaced, or added.
  Why it matters: Sidebar content changes, so spacing that works for today’s items may not keep working.

Key terms: top margin, sidebar, container

3.6.2 Creating a more general solution

The section shows how to space elements vertically with a reusable container class instead of setting margins for the page’s current contents.

• Lobotomized owl selector: Explain how * + * uses an adjacent sibling combinator to select elements that immediately follow another element, leaving the first child of each parent unselected.
  Why it matters: This selector provides spacing between siblings without requiring rules for each element type.
• Reusable stack spacing: Describe how the stack class uses the selector limited by > to add top margins between a container’s direct children, and how adding the class to multiple containers spaces each group’s children.
  Why it matters: The same spacing rule can be reused as content and containers change.

Key terms: lobotomized owl selector, universal selector, adjacent sibling combinator, stack, child combinator, top margins, direct descendants

3.7 Summary