Layout / The visual dictionary

Padding.

Space between a container's boundary and its contents.

Also calledinner spacinginset

See it in context

UI illustration

Padding

Content

What it is

Space between a container's boundary and its contents. Keep text and controls inset from edges so the content remains readable and comfortable to interact with.

When to use it

Use it inside cards, buttons, panels, and page containers.

Know the difference

Padding is inside the boundary; margin separates the element from its neighbors.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

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

Respect safe-area insets separately from ordinary padding; round watch screens may need extra edge accommodation.

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 padding. Keep text and controls inset from edges so the content remains readable and comfortable to interact with. Use it inside cards, buttons, panels, and page containers. 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…

Margin

Safe area

Container