[ @sdxc/u/size ]
margin-inline-end
Applies margin-inline-end — the trailing inline edge, which is the right edge in ltr and the left edge in rtl.
import { mie } from "@sdxc/u/size";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.mie("auto") | css({ marginInlineEnd: "auto" }) |
Examples
Basic example
Use mie(n) to add margin to the inline-end edge of an element, its right in left-to-right text:
mie(12)
<div mix={[...]}>
<div mix={[mie(12), ...]}>mie(12)</div>
</div>Writing direction
mie() follows the writing direction: on the right in left-to-right text and on the left in right-to-left text:
ltr
rtl
<div mix={[...]}>
<div dir="ltr" mix={[...]}>
<div mix={[mie(12), ...]}>ltr</div>
</div>
<div dir="rtl" mix={[...]}>
<div mix={[mie(12), ...]}>rtl</div>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.mie("auto"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.mie("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:
mie(4)Signature
u.mie(value: SpacingValue)