Layout
Top / Right / Bottom / Left
Utilities for controlling the placement of positioned elements.
Quick reference
| Class | Properties |
|---|---|
| inset-0 | inset: 0rem; |
| inset-1 | inset: 0.0625rem; |
| inset-2 | inset: 0.125rem; |
| inset-4 | inset: 0.25rem; |
| inset-8 | inset: 0.5rem; |
| inset-12 | inset: 0.75rem; |
| inset-16 | inset: 1rem; |
| inset-20 | inset: 1.25rem; |
| inset-24 | inset: 1.5rem; |
| inset-32 | inset: 2rem; |
| inset-48 | inset: 3rem; |
| inset-64 | inset: 4rem; |
| inset-96 | inset: 6rem; |
| inset-x-0 | left: 0rem; right: 0rem; |
| inset-x-1 | left: 0.0625rem; right: 0.0625rem; |
| inset-x-2 | left: 0.125rem; right: 0.125rem; |
| inset-x-4 | left: 0.25rem; right: 0.25rem; |
| inset-x-8 | left: 0.5rem; right: 0.5rem; |
| inset-x-12 | left: 0.75rem; right: 0.75rem; |
| inset-x-16 | left: 1rem; right: 1rem; |
| inset-x-20 | left: 1.25rem; right: 1.25rem; |
| inset-x-24 | left: 1.5rem; right: 1.5rem; |
| inset-x-32 | left: 2rem; right: 2rem; |
| inset-x-48 | left: 3rem; right: 3rem; |
| inset-x-64 | left: 4rem; right: 4rem; |
| inset-x-96 | left: 6rem; right: 6rem; |
| inset-y-0 | top: 0rem; bottom: 0rem; |
| inset-y-1 | top: 0.0625rem; bottom: 0.0625rem; |
| inset-y-2 | top: 0.125rem; bottom: 0.125rem; |
| inset-y-4 | top: 0.25rem; bottom: 0.25rem; |
| inset-y-8 | top: 0.5rem; bottom: 0.5rem; |
| inset-y-12 | top: 0.75rem; bottom: 0.75rem; |
| inset-y-16 | top: 1rem; bottom: 1rem; |
| inset-y-20 | top: 1.25rem; bottom: 1.25rem; |
| inset-y-24 | top: 1.5rem; bottom: 1.5rem; |
| inset-y-32 | top: 2rem; bottom: 2rem; |
| inset-y-48 | top: 3rem; bottom: 3rem; |
| inset-y-64 | top: 4rem; bottom: 4rem; |
| inset-y-96 | top: 6rem; bottom: 6rem; |
| top-0 | top: 0rem; |
| top-1 | top: 0.0625rem; |
| top-2 | top: 0.125rem; |
| top-4 | top: 0.25rem; |
| top-8 | top: 0.5rem; |
| top-12 | top: 0.75rem; |
| top-16 | top: 1rem; |
| top-20 | top: 1.25rem; |
| top-24 | top: 1.5rem; |
| top-32 | top: 2rem; |
| top-48 | top: 3rem; |
| top-64 | top: 4rem; |
| top-96 | top: 6rem; |
| left-0 | left: 0rem; |
| left-1 | left: 0.0625rem; |
| left-2 | left: 0.125rem; |
| left-4 | left: 0.25rem; |
| left-8 | left: 0.5rem; |
| left-12 | left: 0.75rem; |
| left-16 | left: 1rem; |
| left-20 | left: 1.25rem; |
| left-24 | left: 1.5rem; |
| left-32 | left: 2rem; |
| left-48 | left: 3rem; |
| left-64 | left: 4rem; |
| left-96 | left: 6rem; |
| right-0 | right: 0rem; |
| right-1 | right: 0.0625rem; |
| right-2 | right: 0.125rem; |
| right-4 | right: 0.25rem; |
| right-8 | right: 0.5rem; |
| right-12 | right: 0.75rem; |
| right-16 | right: 1rem; |
| right-20 | right: 1.25rem; |
| right-24 | right: 1.5rem; |
| right-32 | right: 2rem; |
| right-48 | right: 3rem; |
| right-64 | right: 4rem; |
| right-96 | right: 6rem; |
| bottom-0 | bottom: 0rem; |
| bottom-1 | bottom: 0.0625rem; |
| bottom-2 | bottom: 0.125rem; |
| bottom-4 | bottom: 0.25rem; |
| bottom-8 | bottom: 0.5rem; |
| bottom-12 | bottom: 0.75rem; |
| bottom-16 | bottom: 1rem; |
| bottom-20 | bottom: 1.25rem; |
| bottom-24 | bottom: 1.5rem; |
| bottom-32 | bottom: 2rem; |
| bottom-48 | bottom: 3rem; |
| bottom-64 | bottom: 4rem; |
| bottom-96 | bottom: 6rem; |
Basic usage
Use the {top|right|bottom|left|inset}-{$spacing} utilities to set the horizontal or vertical position of a positioned element.
Customization
$spacing values can be configured using theme.spacing.
Table of Contents