top / right / bottom / left
Utilities for controlling the placement of positioned elements.
| Utility | Styles |
|---|---|
inset[*<value>*] | inset: calc(var(--spacing) * *<number>*); |
inset.full | inset: 100%; |
inset.auto | inset: auto; |
inset.x[*<value>*] | inset-inline: calc(var(--spacing) * *<number>*); |
inset.x.full | inset-inline: 100%; |
inset.x.auto | inset-inline: auto; |
inset.y[*<value>*] | inset-block: calc(var(--spacing) * *<number>*); |
inset.y.full | inset-block: 100%; |
inset.y.auto | inset-block: auto; |
inset.s[*<value>*] | inset-inline-start: calc(var(--spacing) * *<number>*); |
start.full | inset-inline-start: 100%; |
start.auto | inset-inline-start: auto; |
inset.e[*<value>*] | inset-inline-end: calc(var(--spacing) * *<number>*); |
end.full | inset-inline-end: 100%; |
end.auto | inset-inline-end: auto; |
inset.bs[*<value>*] | inset-block-start: calc(var(--spacing) * *<number>*); |
top.full | inset-block-start: 100%; |
top.auto | inset-block-start: auto; |
inset.be[*<value>*] | inset-block-end: calc(var(--spacing) * *<number>*); |
bottom.full | inset-block-end: 100%; |
bottom.auto | inset-block-end: auto; |
top[*<value>*] | top: calc(var(--spacing) * *<number>*); |
right[*<value>*] | right: calc(var(--spacing) * *<number>*); |
right.full | right: 100%; |
right.auto | right: auto; |
bottom[*<value>*] | bottom: calc(var(--spacing) * *<number>*); |
left[*<value>*] | left: calc(var(--spacing) * *<number>*); |
left.full | left: 100%; |
left.auto | left: auto; |