Top / Right / Bottom / Left
Utilities for controlling the placement of positioned elements.
| Namespace | Output |
|---|---|
| inset-0 | { top: 0, right: 0, bottom: 0, left: 0 } |
| inset-y-0 | { top: 0, bottom: 0 } |
| inset-x-0 | { right: 0, left: 0 } |
| top-0 | { top: 0 } |
| right-0 | { right: 0 } |
| bottom-0 | { bottom: 0 } |
| left-0 | { left: 0 } |
| inset-auto | { top: "auto", right: "auto", bottom: "auto", left: "auto" } |
| inset-y-auto | { top: "auto", bottom: "auto" } |
| inset-x-auto | { right: "auto", left: "auto" } |
| top-auto | { top: "auto" } |
| right-auto | { right: "auto" } |
| bottom-auto | { bottom: "auto" } |
| left-auto | { left: "auto" } |
| inset-2 | { top: 2, right: 2, bottom: 2, left: 2 } |
| inset-y-2 | { top: 2, bottom: 2 } |
| inset-x-2 | { right: 2, left: 2 } |
| top-2 | { top: 2 } |
| right-2 | { right: 2 } |
| bottom-2 | { bottom: 2 } |
| left-2 | { left: 2 } |
| inset-3 | { top: 6, right: 6, bottom: 6, left: 6 } |
| inset-y-3 | { top: 6, bottom: 6 } |
| inset-x-3 | { right: 6, left: 6 } |
| top-3 | { top: 6 } |
| right-3 | { right: 6 } |
| bottom-3 | { bottom: 6 } |
| left-3 | { left: 6 } |
| inset-4 | { top: 10, right: 10, bottom: 10, left: 10 } |
| inset-y-4 | { top: 10, bottom: 10 } |
| inset-x-4 | { right: 10, left: 10 } |
| top-4 | { top: 10 } |
| right-4 | { right: 10 } |
| bottom-4 | { bottom: 10 } |
| left-4 | { left: 10 } |
| -inset-2 | { top: -2, right: -2, bottom: -2, left: -2 } |
| -inset-y-2 | { top: -2, bottom: -2 } |
| -inset-x-2 | { right: -2, left: -2 } |
| -top-2 | { top: -2 } |
| -right-2 | { right: -2 } |
| -bottom-2 | { bottom: -2 } |
| -left-2 | { left: -2 } |
| -inset-3 | { top: -6, right: -6, bottom: -6, left: -6 } |
| -inset-y-3 | { top: -6, bottom: -6 } |
| -inset-x-3 | { right: -6, left: -6 } |
| -top-3 | { top: -6 } |
| -right-3 | { right: -6 } |
| -bottom-3 | { bottom: -6 } |
| -left-3 | { left: -6 } |
| -inset-4 | { top: -10, right: -10, bottom: -10, left: -10 } |
| -inset-y-4 | { top: -10, bottom: -10 } |
| -inset-x-4 | { right: -10, left: -10 } |
| -top-4 | { top: -10 } |
| -right-4 | { right: -10 } |
| -bottom-4 | { bottom: -10 } |
| -left-4 | { left: -10 } |