A margin in layout is the empty space between the edge of a page, screen or container and its live content area. In Layout & grids it defines where the grid begins and ends: the margins frame the columns, set the width of the text block and keep content away from trimming, binding, device edges and interface controls.
Margins are not wasted space. They control reading comfort, visual hierarchy and perceived quality, and in print they also have technical functions. In digital design the word overlaps with the CSS margin property, which sets space outside an individual element; in layout terms the margin is the outer frame of the whole composition.
How margins define the layout
Margins establish the live area, also called the type area or text block, inside which the grid’s columns and gutters are placed. Everything the reader must see sits inside that area; only backgrounds and deliberate full-bleed images cross into the margins.
In print a page has four margins with traditional names, and each one can have a different size because the page is held, bound and read in a particular way.
| Margin | Position | Main function |
|---|---|---|
| Head margin | Top of the page | Space for running heads and visual breathing room |
| Foot margin | Bottom of the page | Room for folios and a stable base, usually the largest |
| Inner margin | Binding side, also called the gutter margin | Compensates for the spine and page curvature |
| Outer margin | Edge away from the binding | Space for thumbs, notes and trimming tolerance |
The inner margin of a printed page should not be confused with the gutter between columns. Both words appear in grid systems, but the column gutter separates columns inside the live area, while the binding-side margin separates the live area from the spine.
Margin proportions and classical canons
Book designers developed page canons that relate margins to the proportions of the page. The best-known approach, associated with medieval manuscripts and later reconstructions, gives margins in a ratio of roughly inner 2, head 3, outer 4, foot 6, so the text block sits slightly high and toward the spine of each page.
Modern practice rarely follows a canon exactly, but the principle remains useful: unequal margins look balanced. Equal margins on all four sides often make the text block appear to sink, because the eye perceives the optical center of a page slightly above its geometric center.
| Medium | Typical margin | Determining factor |
|---|---|---|
| Trade book page | About 12–25 mm, foot largest | Binding, hand grip and line length |
| Magazine page | About 10–20 mm | Trim tolerance and dense layout |
| Mobile screen | About 16–24 px per side | Narrow width and thumb reach |
| Tablet screen | About 24–48 px per side | Larger canvas, comfortable framing |
| Desktop web page | Fluid side space around a maximum content width | Line length on wide screens |
Margins in responsive and digital layout
On screens, margins are part of the responsive grid definition. A design system typically specifies, for each breakpoint, the number of columns, the gutter width and the outer margin, for example four columns with 16 px margins on a phone and twelve columns with 32 px or larger margins on a desktop.
Wide screens add a second mechanism. Content is capped at a maximum width, and the remaining space becomes a fluid margin that grows with the window. This keeps line length near the readable range of roughly 45 to 75 characters instead of stretching paragraphs across the full display.
- Use margin values from the same spacing scale as the rest of the system, such as multiples of 8 px in an 8-point grid.
- Respect safe areas on phones so content does not collide with rounded corners, notches or gesture bars.
- Keep margins consistent across screens of the same breakpoint so navigation and content align.
- Let full-bleed elements such as hero images extend past the margins deliberately, while text stays inside.
Margin compared with related spacing concepts
Margins belong to a family of spacing terms that designers and developers often mix up. Precise vocabulary prevents handoff errors between design files and code.
| Term | Where the space sits | Typical role |
|---|---|---|
| Layout margin | Between the page edge and the live area | Frames the whole composition |
| Gutter | Between grid columns | Separates columns of content |
| Padding | Inside a container, around its content | Keeps content off the container border |
| CSS margin | Outside an individual element | Separates neighboring elements |
| Bleed | Beyond the trim edge in print | Allows images to run to the edge after trimming |
| Safe area | Inside screen edges and hardware cutouts | Protects content from being obscured |
In implementation, the layout margin of a web page is often built with container padding rather than the CSS margin property. The visual result is the same, which is why design specifications should describe the intended space, not the property used to produce it.
Common margin mistakes
Margin problems are easy to overlook in a design file and obvious in the final product. The following issues recur in both print and digital work.
| Problem | Consequence | Fix |
|---|---|---|
| Margins too narrow | Crowded, cheap-looking layout and trimming risk | Increase margins before reducing type size |
| Inner margin too small in print | Text disappears into the binding | Add binding allowance for thick books |
| Inconsistent screen margins | Content edges jump between pages | Define margins per breakpoint in tokens |
| Text in the bleed or trim zone | Characters cut off after printing | Keep text inside the safe live area |
| Unlimited content width | Very long lines on large monitors | Set a maximum width and fluid margins |
Understanding it simply
A margin is the empty frame around a page or screen. It is the blank border that keeps words and pictures from touching the edge.
Think of a framed photograph with a white mat around it. The mat makes the picture easier to look at and more important. Good margins do the same for a book page, a website or an app, and they also stop text from being cut off, hidden or squeezed.
Applied in practice
A design team rebuilds a city transport app. User tests show that on small phones the timetable text almost touches the screen edge, and the bottom buttons sit under the system gesture bar. The team defines 16 px side margins for phones, 32 px for tablets and respects the device safe areas.
On the companion website, the team caps the content at a maximum width of about 1200 px, so wide monitors show generous fluid margins instead of overly long lines. The margin values become design tokens shared by designers and developers.
After release, support requests about accidentally tapped buttons drop, and the timetable pages look calmer and more consistent across devices.