Overflow, Outline & Display

overflow decides what happens when content is bigger than its container. The default is visible, meaning the content spills out and is not clipped. hidden clips it, scroll always shows a scrollbar, and auto shows one only when needed.

outline draws a line OUTSIDE the border edge. Unlike border, an outline is not part of the box model: it takes up no space and never shifts neighboring elements. That is why it is the right property for focus rings, which must highlight an element without reflowing the page.

display sets the box type the element generates: block, inline, inline-block, flex, grid, none, or contents. It is the most fundamental layout property, because it determines whether an element starts on its own line, flows with text, or disappears entirely.

Without overflow, long content would always break your layout. A table too wide for its column, a code block longer than its container, or a chat transcript that should scroll independently all need overflow: auto or hidden to behave. The property is what makes bounded UI regions possible.

outline exists because focus indicators must be visible WITHOUT moving content. If a focus ring used border, focusing a button would push its neighbors by the border width. Outline draws over the surrounding area and leaves layout untouched, which is why the accessibility guidelines and the default :focus-visible style both use it.

display: none is the only way to fully remove an element from layout and the accessibility tree. visibility: hidden keeps the space reserved. Knowing the difference is the difference between a tab panel that collapses cleanly and one that leaves a gap.

**Overflow values:** visible (spill out), hidden (clip, no scrollbar, still scrollable via JS), scroll (always show scrollbar), auto (scrollbar only when needed), and clip (clip, NOT scrollable even via JS). Use longhands overflow-x and overflow-y when the axes differ, for example a horizontal-only scroller: overflow-x: auto; overflow-y: hidden;.

**Text truncation** needs three properties together: overflow: hidden, white-space: nowrap, and text-overflow: ellipsis. Miss any one and it breaks: without nowrap the text wraps instead of truncating, without overflow: hidden the overflow still shows.

**Outline vs border:** border is in the box model and takes up layout space; outline is outside the box model and takes up none. Use outline-offset to push the outline away from the border edge, which is how you get a focus ring with a visible gap. Outline cannot be styled per side the way border can.

**Display values:** block fills width and starts a new line. inline flows with text and ignores width, height, and vertical margin. inline-block flows inline but respects width and height. none removes the box completely. contents dissolves the element's own box so its children join the grandparent's layout directly.

**none vs visibility: hidden:** display: none removes the element from layout and the accessibility tree, so it takes up no space and screen readers skip it. visibility: hidden keeps the box's space reserved but invisible, and is inherited, so a child can override it with visibility: visible. Pick none when the element should truly disappear; pick hidden when you need to preserve layout space.