Layout / The visual dictionary

Margin.

Space outside an element that separates it from neighboring content.

Also calledouter spacingoutside space

See it in context

UI illustration

Margin

Element

↔

What it is

Space outside an element that separates it from neighboring content. Use outside spacing to express relationships between blocks and screen edges.

When to use it

Use it to give sections room without increasing their internal surface.

Know the difference

Margin is outside the boundary; padding is inside it.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

CSS has an explicit margin property; native platforms often express this through layout constraints or guides.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a margin. Use outside spacing to express relationships between blocks and screen edges. Use it to give sections room without increasing their internal surface. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Go to the source

You might also mean…

Padding

Gutter

Container