margin

Margins are the spaces surrounding a text block that separate it from the edge of the page or screen, from adjacent elements, and from the reader’s hand or the binding. They serve several functions: they give the text visual breathing room, they affect the line length of the text block, and they can provide space for annotations, navigation, or hierarchy cues.

In print typography, margins have an asymmetry driven by the binding: the inner margin (gutter) must be wide enough that the text does not disappear into the spine, while the outer margin often serves as a thumb rest or annotation space. The convention inherited from medieval manuscripts gives the largest margin to the bottom of the page and the smallest to the inner edge, producing a text block that sits slightly above center.

In web design, margins serve a different structural role. The CSS box model distinguishes between margin (space outside the element’s border) and padding (space inside the border). Margins collapse vertically between adjacent block elements, meaning two stacked margins do not add but instead take the larger of the two. This collapsing behavior is a common source of confusion for developers unfamiliar with the box model.

Generous margins generally improve readability by reducing visual clutter and giving the eye a resting frame around the text.