[ @sdxc/u/size ]

margin

Applies logical margin using the spacing scale, "auto", or a raw CSS length.

import { m } from "@sdxc/u/size";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.m(4)`	`css({ margin: "calc(var(--ui-spacing, 0.25rem) * 4)" })`
`u.m(4, "auto")`	`css({ marginBlock: "...", marginInline: "auto" })`

Use m(n) with a step of the spacing scale, like m(4) or m(8), to add margin on every side of an element:

m(8)

<div mix={[...]}>
	<div mix={[m(8), ...]}>m(8)</div>
</div>

Pass two values to set the block margin and then the inline margin, like m(4, 12):

m(4, 12)

<div mix={[...]}>
	<div mix={[m(4, 12), ...]}>m(4, 12)</div>
</div>

Pass four values to set the block-start, inline-end, block-end and inline-start margins in that order, like m(2, 8, 6, 4):

m(2, 8, 6, 4)

<div mix={[...]}>
	<div mix={[m(2, 8, 6, 4), ...]}>m(2, 8, 6, 4)</div>
</div>

Pass "auto" as the inline margin to center an element that has a width, like m(0, "auto"):

m(0, "auto")

<div mix={[...]}>
	<div mix={[m(0, "auto"), is(64), ...]}>m(0, "auto")</div>
</div>

Every scale argument also takes a raw CSS value, which passes through untouched.

u.m("2.75rem")

Wrap the call in a state utility to scope it to one selector.

u.hover(u.m(4))

Wrap the call in a container query to scope it to one width.

u.at("md", u.m(4))

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:

m(4)

u.m(...values: SpacingValue[])