[ @sdxc/u/size ]
margin-inline
Pulls the host past its container's inline padding by value on both sides via a negative inline margin — for a full-bleed image or divider inside an otherwise padded section, composing u.mi() with a negated length.
import { bleed } from "@sdxc/u/size";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.bleed(4) | css({ marginInline: "calc(-1 * calc(var(--ui-spacing, 0.25rem) * 4))" }) |
Examples
Basic example
Use bleed(n) with the same step as the container's inline padding to pull an element out to the container's edges, like a full-width photo in a padded card:
A card padded on every side.
The photo reaches both edges.
<div mix={[p(6), is(80), ...]}>
<p mix={[...]}>A card padded on every side.</p>
<div mix={[bleed(6), aspect("video"), ...]} />
<p mix={[...]}>The photo reaches both edges.</p>
</div>Default amount
Call bleed() with no argument to bleed by the default 4 step, which matches a container padded with p(4):
Order summary
3 items
<div mix={[p(4), is(72), ...]}>
<p mix={[...]}>Order summary</p>
<div mix={[bleed(), bs("2px"), bg("brand.solid")]} />
<p mix={[...]}>3 items</p>
</div>Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.bleed("2.75rem")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.bleed(4))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.bleed(4))Customizing your theme
Customizing spacing
Every numeric step multiplies --ui-spacing, so redefining it rescales every spacing and sizing utility at once:
:root {
--ui-spacing: 0.25rem;
}Every call that names the step now reads the new value:
bleed(4)Signature
u.bleed(value?: SpacingValue)