[ @sdxc/u/size ]

margin-inline-start

Applies margin-inline-start — the leading inline edge, which is the left edge in ltr and the right edge in rtl.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.mis("auto")`	`css({ marginInlineStart: "auto" })`

Examples

Basic example

Use mis(n) to add margin to the inline-start edge of an element, its left in left-to-right text:

mis(12)

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

Writing direction

mis() follows the writing direction: on the left in left-to-right text and on the right in right-to-left text:

ltr

rtl

<div mix={[...]}>
	<div dir="ltr" mix={[...]}>
		<div mix={[mis(12), ...]}>ltr</div>
	</div>
	<div dir="rtl" mix={[...]}>
		<div mix={[mis(12), ...]}>rtl</div>
	</div>
</div>

Overlapping items

Pass a negative step, like mis(-4), to pull each item over the one before it, like a stack of avatars:

<div mix={[hstack()]}>
	<img src={...} alt="" mix={[circle(), is(14), fit("cover"), ...]} />
	<img
		src={...}
		alt=""
		mix={[circle(), is(14), mis(-4), fit("cover"), ...]}
	/>
	<img
		src={...}
		alt=""
		mix={[circle(), is(14), mis(-4), fit("cover"), ...]}
	/>
	<div mix={[circle(), is(14), mis(-4), ...]}>+5</div>
</div>

Applying on a state

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

u.hover(u.mis("auto"))

Responsive design

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

u.at("md", u.mis("auto"))

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:

mis(4)

Signature

u.mis(value: SpacingValue)