Spacing cheat sheet

Working spacing scales, padding and gaps across mobile, tablet and desktop.

SGDSGOV.UKAtlassian6 rules, updated 7 Oct 2026Verified 7 Oct 2026

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

In 30 seconds

Pick one scale, usually 4 or 8 based, and stay on it
Small gaps inside a component, larger gaps between groups
Card padding 12–16 px on mobile, 16–24 on desktop
Page margins 16–20 px on mobile, 32–64 on desktop
Consistency matters more than the exact number

Shortcut's summary of this sheet. The detail, the reasoning and the sources are below.

Scale

Safe starting point

4 / 8 px base

A working spacing scale

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

A practical starting scale used in many product interfaces. It is a convention, not a rule: what matters is that you pick a scale and stay on it.

4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px

Each yellow bar is the gap at actual size. Small gaps read as one thing; large gaps read as separate things.

Common range 4, 8, 12, 16, 24, 32, 40, 48, 64

4: Very small internal relationship. Icon and label, closely related metadata, small alignment nudges.
8: Strongly related elements. Label to its field, items in a tight group.
12–16: Inside compact product UI. Rows in a list, controls in a toolbar, compact card padding.
16–24: Card and container padding. The inside edge of most cards, panels and dialogs.
24–32: Between groups. Separating one group of fields or one card from the next.
32–48: Between sections. Section breaks within a page.
48–64+: Major page sections. The largest breaks, mostly on content and marketing pages.

Why?

A short scale turns hundreds of small spacing decisions into a handful, and makes spacing differences large enough to read as intentional.

When to deviate. Follow your design system's scale if you have one. Dense tools often add 2 and 6; editorial pages often need steps above 64.

Common mistakes (3)

Everything 16 px apart, so nothing reads as grouped.
Off-scale values such as 13 or 18 that crept in while nudging.
The same gap inside a group as between groups.

Senior designer note“If everything is 16px apart, your UI has spacing but no hierarchy.”

Official guidanceSGDSGOV.UK

SGDS
A 4-point system, with sizes 4, 8, 12, 16, 20, 24, 32, 48, 64, 96 and 128 px.
SGDS, Spacing(opens in a new tab)Design-system convention
GOV.UK
A 5 px based scale: 5, 10, 15, 20, 25, 30, 40, 50, 60. Larger steps shrink on small screens.
GOV.UK Design System, Spacing(opens in a new tab)Design-system convention

Spacing shows what belongs together

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Related things sit closer together than unrelated things. Decide the groups first, then let the gaps follow.

Why?

People read proximity as relationship before they read any label. Even spacing removes that signal.

When to use it

Inside a group: the smallest gaps.
Between groups: clearly larger, at least one step up the scale.
Between sections: larger again.

Common mistakes (2)

A heading that sits midway between two blocks, so it belongs to neither.
Whitespace added to feel premium, with no structure behind it.

Senior designer note“Spacing should communicate relationships, not just make a screen feel airy.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Padding and sections

Safe starting point

16–24 px

Padding

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

Common working ranges for the space inside a container. Consistency matters more than finding a theoretically perfect value: pick one value per kind of container and keep it.

Mobile

12–16 px

Tablet

16–20 px

Desktop

16–24 px

The yellow band is the card's padding. Schematic, not to scale: the frames are small, so the padding is drawn in proportion.

Mobile: 12–16 px
Tablet: 16–20 px
Laptop: 16–24 px
Desktop: 16–24 px
Large desktop: 20–32 px

Depends on information density, component size, touch interaction, product type, your design system. A starting point, not a correct value.

Common range 8–12 compact control, 16–24 standard card, 24–32 large content card

8–12: Compact control. Buttons, chips, table cells, dense toolbars.
16–24: Standard card. Most cards, panels, popovers and dialogs.
24–32: Large content card. Cards holding long text or a single important object.

Why?

This range tends to give a desktop product card room to breathe while keeping useful density. Compact enterprise tools go lower; large editorial cards go higher.

When to deviate. Go tighter when people scan many items at once. Go looser when a card holds one thing people read carefully.

Common mistakes (3)

Different padding on cards that sit side by side.
Padding larger than the gap between cards, so the insides feel further apart than the cards.
Desktop padding carried unchanged onto a 360 px screen.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

40–64 px

Section spacing

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The vertical gap between major parts of a page.

Mobile: 24–40 px
Tablet: 32–48 px
Laptop: 40–64 pxSame as desktop
Desktop: 40–64 px
Large desktop: 48–80 px

Depends on how much each section holds, density, whether the page is read or worked in. A starting point, not a correct value.

Common range 32–48 in product UI, 48–96 on content pages

Why?

Sections need a gap clearly larger than anything inside them, or the page reads as one undivided list.

When to deviate. Tighten in dense tools where people work in one screenful. Loosen on long reading pages.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Margins and gaps

Safe starting point

32–64 px

Page margins

Industry conventionShortcut editorial, reviewed 9 Oct 2026

Applies to Mobile to large desktop

The space between the edge of the viewport and the content. On large screens it depends on the container: once content reaches its maximum width, the margin is whatever is left over.

Mobile: 16–20 px
Tablet: 24–32 px
Laptop: 32–64 pxSame as desktop
Desktop: 32–64 px
Large desktop: 48–80 px

Depends on container strategy, whether content has a maximum width, density. A starting point, not a correct value.

Why?

Content needs to clear the screen edge, and on a phone every pixel of margin is taken from the content. So margins start small and grow with the space available.

When to deviate. Full-bleed media, maps and data canvases can run to the edge. Keep text and controls inside the margin.

Common mistakes (2)

Desktop margins kept on a phone, leaving a narrow strip of content.
Margins that keep growing on a very wide screen while the content stays small in the middle with no maximum width.

Official guidanceSGDSGOV.UKAtlassian

SGDS
Deliver at least 320, 768 and 1440 px layouts.
SGDS, Layout, Breakpoint(opens in a new tab)Design-system convention
GOV.UK
The responsive spacing scale uses smaller values on small screens for its larger steps.
GOV.UK Design System, Spacing(opens in a new tab)Design-system convention
Atlassian
Grid margins are 16 px for viewports up to 1023 px and 32 px from 1024 px.
Atlassian Design System, Grid(opens in a new tab)Design-system convention

Safe starting point

Small 4–12, medium 12–24, large 24–40 px

Gaps between elements

Industry conventionShortcut editorial, reviewed 9 Oct 2026

Applies to Mobile to large desktop

Three working sizes of gap. Small sits inside a component, medium between related items, large between groups. The relationship between them matters more than the numbers.

Mobile: Small 4–8, medium 8–16, large 16–24 px
Tablet: No separate value. Use the nearest one.
Laptop: Small 4–12, medium 12–24, large 24–40 pxSame as desktop
Desktop: Small 4–12, medium 12–24, large 24–40 px
Large desktop: Small 4–12, medium 12–24, large 24–40 pxSame as desktop

Depends on how closely the elements relate, density, touch interaction. A starting point, not a correct value.

Small: Inside a component. Icon to label, label to field, lines of a list item.
Medium: Between related items. Fields in a form group, cards in a grid, items in a toolbar.
Large: Between groups. One form group and the next, a heading and the block before it.

Why?

People read distance as relatedness. Three clearly different gaps are enough to show what belongs together, on any screen.

When to deviate. On mobile the large gap shrinks most, because vertical space is scarce. Keep the gap between tappable items large enough that a finger does not hit the neighbour.

Common mistakes (2)

The same gap everywhere, so nothing reads as grouped.
Gaps reduced on mobile until separate tap targets touch.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

In 30 seconds

Pick one scale, usually 4 or 8 based, and stay on it

Small gaps inside a component, larger gaps between groups

Card padding 12–16 px on mobile, 16–24 on desktop

Page margins 16–20 px on mobile, 32–64 on desktop

Consistency matters more than the exact number

Shortcut's summary of this sheet. The detail, the reasoning and the sources are below.

Scale

Safe starting point

4 / 8 px base

A working spacing scale

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

A practical starting scale used in many product interfaces. It is a convention, not a rule: what matters is that you pick a scale and stay on it.

4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px

Each yellow bar is the gap at actual size. Small gaps read as one thing; large gaps read as separate things.

Common range 4, 8, 12, 16, 24, 32, 40, 48, 64

4: Very small internal relationship. Icon and label, closely related metadata, small alignment nudges.
8: Strongly related elements. Label to its field, items in a tight group.
12–16: Inside compact product UI. Rows in a list, controls in a toolbar, compact card padding.
16–24: Card and container padding. The inside edge of most cards, panels and dialogs.
24–32: Between groups. Separating one group of fields or one card from the next.
32–48: Between sections. Section breaks within a page.
48–64+: Major page sections. The largest breaks, mostly on content and marketing pages.

Why?

A short scale turns hundreds of small spacing decisions into a handful, and makes spacing differences large enough to read as intentional.

When to deviate. Follow your design system's scale if you have one. Dense tools often add 2 and 6; editorial pages often need steps above 64.

Common mistakes (3)

Everything 16 px apart, so nothing reads as grouped.
Off-scale values such as 13 or 18 that crept in while nudging.
The same gap inside a group as between groups.

Senior designer note“If everything is 16px apart, your UI has spacing but no hierarchy.”

Official guidanceSGDSGOV.UK

SGDS
A 4-point system, with sizes 4, 8, 12, 16, 20, 24, 32, 48, 64, 96 and 128 px.
SGDS, Spacing(opens in a new tab)Design-system convention
GOV.UK
A 5 px based scale: 5, 10, 15, 20, 25, 30, 40, 50, 60. Larger steps shrink on small screens.
GOV.UK Design System, Spacing(opens in a new tab)Design-system convention

Spacing shows what belongs together

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Related things sit closer together than unrelated things. Decide the groups first, then let the gaps follow.

Why?

People read proximity as relationship before they read any label. Even spacing removes that signal.

When to use it

Inside a group: the smallest gaps.
Between groups: clearly larger, at least one step up the scale.
Between sections: larger again.

Common mistakes (2)

A heading that sits midway between two blocks, so it belongs to neither.
Whitespace added to feel premium, with no structure behind it.

Senior designer note“Spacing should communicate relationships, not just make a screen feel airy.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Padding and sections

Safe starting point

16–24 px

Padding

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

Common working ranges for the space inside a container. Consistency matters more than finding a theoretically perfect value: pick one value per kind of container and keep it.

Mobile

12–16 px

Tablet

16–20 px

Desktop

16–24 px

The yellow band is the card's padding. Schematic, not to scale: the frames are small, so the padding is drawn in proportion.

Mobile: 12–16 px
Tablet: 16–20 px
Laptop: 16–24 px
Desktop: 16–24 px
Large desktop: 20–32 px

Depends on information density, component size, touch interaction, product type, your design system. A starting point, not a correct value.

Common range 8–12 compact control, 16–24 standard card, 24–32 large content card

8–12: Compact control. Buttons, chips, table cells, dense toolbars.
16–24: Standard card. Most cards, panels, popovers and dialogs.
24–32: Large content card. Cards holding long text or a single important object.

Why?

This range tends to give a desktop product card room to breathe while keeping useful density. Compact enterprise tools go lower; large editorial cards go higher.

When to deviate. Go tighter when people scan many items at once. Go looser when a card holds one thing people read carefully.

Common mistakes (3)

Different padding on cards that sit side by side.
Padding larger than the gap between cards, so the insides feel further apart than the cards.
Desktop padding carried unchanged onto a 360 px screen.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

40–64 px

Section spacing

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The vertical gap between major parts of a page.

Mobile: 24–40 px
Tablet: 32–48 px
Laptop: 40–64 pxSame as desktop
Desktop: 40–64 px
Large desktop: 48–80 px

Depends on how much each section holds, density, whether the page is read or worked in. A starting point, not a correct value.

Common range 32–48 in product UI, 48–96 on content pages

Why?

Sections need a gap clearly larger than anything inside them, or the page reads as one undivided list.

When to deviate. Tighten in dense tools where people work in one screenful. Loosen on long reading pages.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Margins and gaps

Safe starting point

32–64 px

Page margins

Industry conventionShortcut editorial, reviewed 9 Oct 2026

Applies to Mobile to large desktop

The space between the edge of the viewport and the content. On large screens it depends on the container: once content reaches its maximum width, the margin is whatever is left over.

Mobile: 16–20 px
Tablet: 24–32 px
Laptop: 32–64 pxSame as desktop
Desktop: 32–64 px
Large desktop: 48–80 px

Depends on container strategy, whether content has a maximum width, density. A starting point, not a correct value.

Why?

Content needs to clear the screen edge, and on a phone every pixel of margin is taken from the content. So margins start small and grow with the space available.

When to deviate. Full-bleed media, maps and data canvases can run to the edge. Keep text and controls inside the margin.

Common mistakes (2)

Desktop margins kept on a phone, leaving a narrow strip of content.
Margins that keep growing on a very wide screen while the content stays small in the middle with no maximum width.

Official guidanceSGDSGOV.UKAtlassian

SGDS
Deliver at least 320, 768 and 1440 px layouts.
SGDS, Layout, Breakpoint(opens in a new tab)Design-system convention
GOV.UK
The responsive spacing scale uses smaller values on small screens for its larger steps.
GOV.UK Design System, Spacing(opens in a new tab)Design-system convention
Atlassian
Grid margins are 16 px for viewports up to 1023 px and 32 px from 1024 px.
Atlassian Design System, Grid(opens in a new tab)Design-system convention

Safe starting point

Small 4–12, medium 12–24, large 24–40 px

Gaps between elements

Industry conventionShortcut editorial, reviewed 9 Oct 2026

Applies to Mobile to large desktop

Three working sizes of gap. Small sits inside a component, medium between related items, large between groups. The relationship between them matters more than the numbers.

Mobile: Small 4–8, medium 8–16, large 16–24 px
Tablet: No separate value. Use the nearest one.
Laptop: Small 4–12, medium 12–24, large 24–40 pxSame as desktop
Desktop: Small 4–12, medium 12–24, large 24–40 px
Large desktop: Small 4–12, medium 12–24, large 24–40 pxSame as desktop

Depends on how closely the elements relate, density, touch interaction. A starting point, not a correct value.

Small: Inside a component. Icon to label, label to field, lines of a list item.
Medium: Between related items. Fields in a form group, cards in a grid, items in a toolbar.
Large: Between groups. One form group and the next, a heading and the block before it.

Why?

People read distance as relatedness. Three clearly different gaps are enough to show what belongs together, on any screen.

When to deviate. On mobile the large gap shrinks most, because vertical space is scarce. Keep the gap between tappable items large enough that a finger does not hit the neighbour.

Common mistakes (2)

The same gap everywhere, so nothing reads as grouped.
Gaps reduced on mobile until separate tap targets touch.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Spacing cheat sheet

Filters

In 30 seconds

Scale

A working spacing scale

Spacing shows what belongs together

When to use it

Padding and sections

Padding

Section spacing

Margins and gaps

Page margins

Gaps between elements

Spacing cheat sheet

Filters

In 30 seconds

Scale

A working spacing scale

Spacing shows what belongs together

When to use it

Padding and sections

Padding

Section spacing

Margins and gaps

Page margins

Gaps between elements