[ @sdxc/u/layout ]
display
Sets display: inline-block.
import { inlineBlock } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.inlineBlock() | css({ display: "inline-block" }) |
Examples
Basic example
Use inlineBlock() to keep an element in the line of text while it keeps its own box, so padding and size apply and it never splits across lines:
Press
inlineBlock()
to keep a box whole inside a sentence, then save
when you are done.<div mix={[is(96), ...]}>
Press <div mix={[inlineBlock(), ...]}>inlineBlock()</div> to keep a box whole inside
a sentence, then <div mix={[inlineBlock(), ...]}>save</div> when you are done.
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.inlineBlock())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.inlineBlock())Signature
u.inlineBlock()