Margin is the breathing room between matter and the bezel

What it is

Margin is the empty ring between the block of matter and the physical edge of the screen. It makes type and buttons the figure, and leaves the glass, the corner radius and the system gesture strip as ground. Body text flush to a rounded corner loses glyph fragments and looks glued to the housing. A full-bleed photograph may run to the edge — the photograph is ground.

On a phone, a 0 margin fails first as clipping and mis-taps, and only later as taste. In a desktop window, a 200 px margin exiles the main column to a postage stamp: breathing became banishment.

Why it happens

The screen edge is a fierce visual line and a resting place for the thumb. Matter that collides with it merges into device chrome: type stops being a readable object, and hit targets fall into the corner dead zone and edge gestures. Margin’s job is to lift content-as-figure off device-as-ground.

It does not separate column from column (that is the gutter). It frames the whole well against the window. So body and controls want margin, while a hero, a map or a video backdrop may bleed — opposite needs at the same edge. One shared inset either letterboxes the image or shoves glyphs into the glass curve.

Where it stops holding

Borderless canvases (drawing, turn-by-turn maps, video with chrome hidden) should run margin near zero and only inset the controls that must stay tappable. In split view or a freely resized window, margin follows the window, not a phone’s frozen 16 px: a narrow pane would cinch the column to a ribbon; a wide pane would bank dead space.

Notch and home indicator eat more of the edge. Margin is the layout’s content frame; the safe area is hardware occlusion. They stack; neither replaces the other.

Applying it

• Split “grounds that may bleed” from “matter that must leave the edge”: paint backgrounds full-bleed; pull text and tappables in.
• Measure the minimum margin on device: corner radius, status region and the home indicator all have to clear body copy, not just a 16 px box on the artboard.
• How to check: on the target handset open a body-text screen and a full-bleed media screen. The first column of type must not enter the corner sector or sit under the notch. The media image should paint to the physical edge. Then scrape a thumb along the bezel: if what you hit is a button rather than empty, the margin is too thin.

Related

• Same group: F2.02.1 Gutter width is what keeps columns from reading as one stream · F2.02.3 The ratio among column, gutter and margin outruns any absolute
• Nearby: F2.12 Safe areas and irregular screens · F1.05 Reachability of edges and corners · F2.04 Whitespace
• Search terms: margin · page inset · bezel · full bleed