This text is crammed against the border with only 4px padding. It feels claustrophobic and hard to read because the eye has nowhere to rest.
14px body, 2px padding all sides
Two pixels of padding is essentially nothing — body text needs room to breathe inside its container, especially across multiple lines.
16px body, 4px padding, background only
A colored background containment with only 4px padding around 16px body text. The colored edge feels like it's pressing in.
Asymmetric cramping
1px vertical / 16px horizontal, 14px body
Generous horizontal padding doesn't save you when the vertical padding is just one pixel. Lines stack on top of each other against the container edge.
12px vertical / 4px horizontal, 14px body
Comfortable vertical padding can't fix horizontal text running right up against the side edges. Words feel like they're falling off the container.
Currently missed: cramped large text
24px heading, 8px padding (passes the 8px floor but is too tight for the text size)
Tight Heading Container Label
32px hero, 6px vertical / 16px horizontal padding
Hero Section With Tight Vertical Padding
Fixed-height box the text fills
260x36px flex row, padding 0, 16px text on an 18px line box: two lines run edge to edge
Two full lines of label text inside a 36px band
Small chip whose text touches the edge (browser engine only)
20px chip, padding 0: the 16px glyphs reach within 2px of the top and bottom
Limited edition
Chip of 28px or more, measured by its content area (browser engine only)
28px price chip, padding 2px 8px, 14px label on a 20px line at the top: a 28px chip is not under 28px, so its text is measured by the content area, about 3px off the top
1,250 SAR
the same chip at 27.6px: still not under the 27.5px bound
1,250 SAR
Cramped multi-line code block
<pre>, 2px padding, 14px monospace
function example() {
const value = "cramped";
return value;
}
small badge: 11px font, 4px / 8px paddingFEATURED ITEM BADGE
tag chip: 12px font, 4px / 10px paddingdesign system tag chip
long inline code chip: compact inline code should not be treated like a padded cardnpx impeccable check
Cards at current standards
16px body, 8px padding (the original 8px floor)
Standard card with 8px padding around 16px body text. Comfortable and within current conventions.
14px body, 16px padding (generous)
Generous 16px padding around 14px body text. The eye has plenty of room from the container edge.
18px body, 12px padding (proportional)
Larger body text gets proportionally more padding. 12px around 18px text feels balanced.
Comfortable code blocks
multi-line <pre>, 8px padding, 14px font
function example() {
const value = "ok";
return value;
}
multi-line <pre>, 12px padding, 14px font
function example() {
const value = "comfortable";
return value;
}
Interactive elements
button: 14px font, 8px / 16px padding
form input: 16px font, 8px / 12px padding
Labels centred by the layout
40px-tall inline-flex CTA, padding 0 32px: the 14px label keeps 12px of air on both sidesBook a free consultation
420x40px announcement band, padding 0: the 14px line is centred on both axes
We are hiring across every engineering team
Transparent focus-ring border
420px accordion trigger, padding 20px 0, border 1px solid transparent: no side edge is drawn
What does the free plan include?
Big text with proportional padding
24px heading, 16px padding
Heading With Room To Breathe
32px hero, 20px / 32px padding
Hero With Big Padding
Small chip inset by its line box (browser engine only)
24px step chip, padding 2px 8px, 14px label on a 20px line: the glyphs sit 5px off the top and bottom. The static engine reads only the declared padding and still reports it.
Point 1
the price chip at 27px, under the 27.5px bound: measured by its glyphs, whose em box sits 4.5px off the top. The static engine reads only the declared padding and still reports it.
1,250 SAR
Inline highlight across two lines
an inline highlight with no vertical padding wraps onto two lines: each fragment is one 21px line, not one 43px box
Every estimate is checked against the carrier's own estimating guide before it ships to the customer.