Box model, flow and overflow

Count the right areas

With content-box, width defines the content area; padding and border enlarge the border box. With border-box, those two areas fit within the declared width, subject to the nonnegative-content limit. In the example, 240 minus 32 of padding and 4 of border gives 204px of content.

The 12px margin lies outside the border box. Record the dimension being sought before calculating: comparing width with a measurement that includes margins produces a wrong conclusion even with correct arithmetic.

Width also has conditions

Width does not apply to a non-replaced inline in normal flow in the same way as to a block. A span can retain its content width even when width: 180px wins the cascade. Inline-block provides an inline-level outer box with an applicable width.

Do not extrapolate this example to replaced images or flex and grid items: context changes the rules. Min-width and max-width can also constrain size; simple arithmetic exercises explicitly exclude those constraints.

The zero-content limit

Border-box does not make negative content width possible. If width is 20px, horizontal padding totals 30px and borders total 4px, content is floored at zero and the border box reaches 34px. Padding and borders are not automatically reduced to satisfy 20px.

This matters for narrow cards and reused components: a consistent box model helps but does not replace reviewing geometric constraints and available space.

Margins sharing a gap

In horizontal-tb block flow, vertical margins of adjacent blocks can collapse. For positive margins of 16px and 24px, the collapsed gap is 24px, not 40px. In a group containing positive and negative values, combine the largest positive with the most negative: 18, 10 and -6 yield 12px.

These calculations assume an actually collapsible group. Flex, grid, clearance, separators and parent-child relationships require inspecting context before choosing a formula.

Contain a float without clipping

A floated image can extend beyond the height an ordinary container obtains from in-flow content. Display: flow-root creates a block formatting context and allows the float to be contained in automatic-height calculation. Using overflow: hidden can also create that context but adds clipping and scrolling behavior that may hide shadows, menus or actions.

If the goal is only containment, flow-root expresses that intention without adding clipping; content arrangement still requires consideration.

Reserved space and positioning reference

Relative keeps the element’s space in flow although top can offset its rendering. Absolute removes the box from normal flow. In the example, position: relative on the card establishes the reference for the absolute badge without removing the card from flow.

Do not generalize that absolute always uses the viewport: positioned ancestors and other mechanisms, such as transforms, can establish a containing block. This block’s cases exclude those additional mechanisms when asking for an exact prediction.

Clipping, scrolling and sticky

Hidden clips content but can allow scrolling through code or focus. Clip clips without creating a scroll container or allowing that programmatic scrolling. Auto can provide scrolling when content exceeds the constrained area.

Sticky uses the relevant scrolling ancestor and containing-block boundaries, requiring a non-auto inset on the intended axis. In the example panel, top: 0 does not turn the heading into viewport fixed positioning. Observe which box scrolls and which box constrains the heading before changing offsets.

Common pitfalls

Adding margin into the border box; assuming border-box compresses padding; using !important to make width apply to inline; adding collapsed margins; using hidden solely to contain floats; treating sticky as fixed; expecting relative offsets to move siblings.