Should flag

Shell offset to the left rule

the shell is carried 24px left, onto the card's rule, with the padded paragraphs inside it.

Copy a relative offset carried onto the rule.

A second paragraph beside it.

Shell offset to the top rule

the shell is carried 24px up, so the first paragraph's padding sits above the card.

Copy a relative offset lifted onto the rule.

A second paragraph below it.

Shell carried by a transform

a translateX(-24px) on the shell carries the padded paragraphs onto the card's left rule.

Copy a transform carried onto the rule.

A second paragraph beside it.

Paragraphs offset inside the shell

each padded paragraph is carried 24px left by its own relative offset, onto the card's rule.

Copy its own offset carried onto the rule.

A second paragraph beside it.

Paragraphs pulled by a negative margin

each padded paragraph has margin-left: -24px, which cancels its padding on the left rule.

Copy a negative margin pulled onto the rule.

A second paragraph beside it.

Paragraphs pulled by a margin shorthand

each padded paragraph has margin: 0 0 0 -24px, the same pull written as a shorthand.

Copy a shorthand margin pulled onto the rule.

A second paragraph beside it.

Unpadded paragraph beside the shell

a padded shell sits beside an unpadded paragraph that touches the card's rules.

Copy padded off the rule.

A second padded paragraph.

Copy beside the shell with no inset.

Paragraphs pulled by an em margin

32px paragraphs with margin-left: -0.75em, which is -24px at their own size and cancels the padding.

Large copy pulled onto the rule.

A second large line.

Margins collapse through a plain card

no border, padding or formatting context on the card: the paragraphs' margins escape it.

Copy whose margin collapses out of the card.

A second paragraph below it.

Should pass

Positioned shell with no offset

position: relative alone moves nothing, so the paragraphs' padding still insets the text.

Copy inside a shell that only anchors.

A second paragraph below it.

Transparent border holds the margins

a 1px transparent border on the card stops the paragraphs' margins collapsing out of it.

Copy held off the edge by its margin.

A second paragraph below it.

Flex card holds the margins

the card is a flex column: its item's margins never collapse out of it.

Copy in a flex card's only item.

A second paragraph below it.

Grid card holds the margins

the card is a grid: its item's margins never collapse out of it.

Copy in a grid card's only item.

A second paragraph below it.

Flow-root card holds the margins

the card is a flow-root: it contains its children's margins.

Copy in a flow-root card.

A second paragraph below it.

Pinned label inside the shell

the second paragraph is absolutely pinned; its own offsets place it, not the shell (like a badge on a card corner), so the in-flow paragraph decides.

Copy in normal flow, padded off the rule.

Pinned label copy.

Paragraphs nudged by a small negative margin

margin-left: -1px against 24px of padding still leaves the text 23px off the rule.

Copy nudged a pixel, still well inset.

A second paragraph below it.

Floated shell holds the margins

the shell is floated, so the paragraphs' margins stay inside the float.

Copy in a floated shell.

A second paragraph below it.

Floated card holds the margins

the card is floated, which starts a formatting context that contains its children's margins.

Copy in a floated card.

A second paragraph below it.