Top / Right / Bottom / Left
Utilities for controlling the placement of positioned elements.
Usage
| 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-1 | { "top": 4, "right": 4, "bottom": 4, "left": 4 } |
| inset-2 | { "top": 8, "right": 8, "bottom": 8, "left": 8 } |
| inset-3 | { "top": 12, "right": 12, "bottom": 12, "left": 12 } |
| inset-4 | { "top": 16, "right": 16, "bottom": 16, "left": 16 } |
| inset-5 | { "top": 20, "right": 20, "bottom": 20, "left": 20 } |
| inset-6 | { "top": 24, "right": 24, "bottom": 24, "left": 24 } |
| inset-7 | { "top": 28, "right": 28, "bottom": 28, "left": 28 } |
| inset-8 | { "top": 32, "right": 32, "bottom": 32, "left": 32 } |
| inset-9 | { "top": 36, "right": 36, "bottom": 36, "left": 36 } |
| inset-10 | { "top": 40, "right": 40, "bottom": 40, "left": 40 } |
| inset-12 | { "top": 48, "right": 48, "bottom": 48, "left": 48 } |
| inset-16 | { "top": 64, "right": 64, "bottom": 64, "left": 64 } |
| inset-20 | { "top": 80, "right": 80, "bottom": 80, "left": 80 } |
| inset-24 | { "top": 96, "right": 96, "bottom": 96, "left": 96 } |
| inset-32 | { "top": 128, "right": 128, "bottom": 128, "left": 128 } |
| inset-40 | { "top": 160, "right": 160, "bottom": 160, "left": 160 } |
| inset-48 | { "top": 192, "right": 192, "bottom": 192, "left": 192 } |
| inset-56 | { "top": 224, "right": 224, "bottom": 224, "left": 224 } |
| inset-64 | { "top": 256, "right": 256, "bottom": 256, "left": 256 } |
| inset-px | { "top": 2, "right": 2, "bottom": 2, "left": 2 } |
| inset-y-1 | { "top": 4, "bottom": 4 } |
| inset-y-2 | { "top": 8, "bottom": 8 } |
| inset-y-3 | { "top": 12, "bottom": 12 } |
| inset-y-4 | { "top": 16, "bottom": 16 } |
| inset-y-5 | { "top": 20, "bottom": 20 } |
| inset-y-6 | { "top": 24, "bottom": 24 } |
| inset-y-7 | { "top": 28, "bottom": 28 } |
| inset-y-8 | { "top": 32, "bottom": 32 } |
| inset-y-9 | { "top": 36, "bottom": 36 } |
| inset-y-10 | { "top": 40, "bottom": 40 } |
| inset-y-12 | { "top": 48, "bottom": 48 } |
| inset-y-16 | { "top": 64, "bottom": 64 } |
| inset-y-20 | { "top": 80, "bottom": 80 } |
| inset-y-24 | { "top": 96, "bottom": 96 } |
| inset-y-32 | { "top": 128, "bottom": 128 } |
| inset-y-40 | { "top": 160, "bottom": 160 } |
| inset-y-48 | { "top": 192, "bottom": 192 } |
| inset-y-56 | { "top": 224, "bottom": 224 } |
| inset-y-64 | { "top": 256, "bottom": 256 } |
| inset-y-px | { "top": 2, "bottom": 2 } |
| inset-x-1 | { "right": 4, "left": 4 } |
| inset-x-2 | { "right": 8, "left": 8 } |
| inset-x-3 | { "right": 12, "left": 12 } |
| inset-x-4 | { "right": 16, "left": 16 } |
| inset-x-5 | { "right": 20, "left": 20 } |
| inset-x-6 | { "right": 24, "left": 24 } |
| inset-x-7 | { "right": 28, "left": 28 } |
| inset-x-8 | { "right": 32, "left": 32 } |
| inset-x-9 | { "right": 36, "left": 36 } |
| inset-x-10 | { "right": 40, "left": 40 } |
| inset-x-12 | { "right": 48, "left": 48 } |
| inset-x-16 | { "right": 64, "left": 64 } |
| inset-x-20 | { "right": 80, "left": 80 } |
| inset-x-24 | { "right": 96, "left": 96 } |
| inset-x-32 | { "right": 128, "left": 128 } |
| inset-x-40 | { "right": 160, "left": 160 } |
| inset-x-48 | { "right": 192, "left": 192 } |
| inset-x-56 | { "right": 224, "left": 224 } |
| inset-x-64 | { "right": 256, "left": 256 } |
| inset-x-px | { "right": 2, "left": 2 } |
| top-1 | { "top": 4 } |
| top-2 | { "top": 8 } |
| top-3 | { "top": 12 } |
| top-4 | { "top": 16 } |
| top-5 | { "top": 20 } |
| top-6 | { "top": 24 } |
| top-7 | { "top": 28 } |
| top-8 | { "top": 32 } |
| top-9 | { "top": 36 } |
| top-10 | { "top": 40 } |
| top-12 | { "top": 48 } |
| top-16 | { "top": 64 } |
| top-20 | { "top": 80 } |
| top-24 | { "top": 96 } |
| top-32 | { "top": 128 } |
| top-40 | { "top": 160 } |
| top-48 | { "top": 192 } |
| top-56 | { "top": 224 } |
| top-64 | { "top": 256 } |
| top-px | { "top": 2 } |
| right-1 | { "right": 4 } |
| right-2 | { "right": 8 } |
| right-3 | { "right": 12 } |
| right-4 | { "right": 16 } |
| right-5 | { "right": 20 } |
| right-6 | { "right": 24 } |
| right-7 | { "right": 28 } |
| right-8 | { "right": 32 } |
| right-9 | { "right": 36 } |
| right-10 | { "right": 40 } |
| right-12 | { "right": 48 } |
| right-16 | { "right": 64 } |
| right-20 | { "right": 80 } |
| right-24 | { "right": 96 } |
| right-32 | { "right": 128 } |
| right-40 | { "right": 160 } |
| right-48 | { "right": 192 } |
| right-56 | { "right": 224 } |
| right-64 | { "right": 256 } |
| right-px | { "right": 2 } |
| bottom-1 | { "bottom": 4 } |
| bottom-2 | { "bottom": 8 } |
| bottom-3 | { "bottom": 12 } |
| bottom-4 | { "bottom": 16 } |
| bottom-5 | { "bottom": 20 } |
| bottom-6 | { "bottom": 24 } |
| bottom-7 | { "bottom": 28 } |
| bottom-8 | { "bottom": 32 } |
| bottom-9 | { "bottom": 36 } |
| bottom-10 | { "bottom": 40 } |
| bottom-12 | { "bottom": 48 } |
| bottom-16 | { "bottom": 64 } |
| bottom-20 | { "bottom": 80 } |
| bottom-24 | { "bottom": 96 } |
| bottom-32 | { "bottom": 128 } |
| bottom-40 | { "bottom": 160 } |
| bottom-48 | { "bottom": 192 } |
| bottom-56 | { "bottom": 224 } |
| bottom-64 | { "bottom": 256 } |
| bottom-px | { "bottom": 2 } |
| left-1 | { "left": 4 } |
| left-2 | { "left": 8 } |
| left-3 | { "left": 12 } |
| left-4 | { "left": 16 } |
| left-5 | { "left": 20 } |
| left-6 | { "left": 24 } |
| left-7 | { "left": 28 } |
| left-8 | { "left": 32 } |
| left-9 | { "left": 36 } |
| left-10 | { "left": 40 } |
| left-12 | { "left": 48 } |
| left-16 | { "left": 64 } |
| left-20 | { "left": 80 } |
| left-24 | { "left": 96 } |
| left-32 | { "left": 128 } |
| left-40 | { "left": 160 } |
| left-48 | { "left": 192 } |
| left-56 | { "left": 224 } |
| left-64 | { "left": 256 } |
| left-px | { "left": 2 } |
| -inset-1 | { "top": -4, "right": -4, "bottom": -4, "left": -4 } |
| -inset-2 | { "top": -8, "right": -8, "bottom": -8, "left": -8 } |
| -inset-3 | { "top": -12, "right": -12, "bottom": -12, "left": -12 } |
| -inset-4 | { "top": -16, "right": -16, "bottom": -16, "left": -16 } |
| -inset-5 | { "top": -20, "right": -20, "bottom": -20, "left": -20 } |
| -inset-6 | { "top": -24, "right": -24, "bottom": -24, "left": -24 } |
| -inset-7 | { "top": -28, "right": -28, "bottom": -28, "left": -28 } |
| -inset-8 | { "top": -32, "right": -32, "bottom": -32, "left": -32 } |
| -inset-9 | { "top": -36, "right": -36, "bottom": -36, "left": -36 } |
| -inset-10 | { "top": -40, "right": -40, "bottom": -40, "left": -40 } |
| -inset-12 | { "top": -48, "right": -48, "bottom": -48, "left": -48 } |
| -inset-16 | { "top": -64, "right": -64, "bottom": -64, "left": -64 } |
| -inset-20 | { "top": -80, "right": -80, "bottom": -80, "left": -80 } |
| -inset-24 | { "top": -96, "right": -96, "bottom": -96, "left": -96 } |
| -inset-32 | { "top": -128, "right": -128, "bottom": -128, "left": -128 } |
| -inset-40 | { "top": -160, "right": -160, "bottom": -160, "left": -160 } |
| -inset-48 | { "top": -192, "right": -192, "bottom": -192, "left": -192 } |
| -inset-56 | { "top": -224, "right": -224, "bottom": -224, "left": -224 } |
| -inset-64 | { "top": -256, "right": -256, "bottom": -256, "left": -256 } |
| -inset-px | { "top": -2, "right": -2, "bottom": -2, "left": -2 } |
| -inset-y-1 | { "top": -4, "bottom": -4 } |
| -inset-y-2 | { "top": -8, "bottom": -8 } |
| -inset-y-3 | { "top": -12, "bottom": -12 } |
| -inset-y-4 | { "top": -16, "bottom": -16 } |
| -inset-y-5 | { "top": -20, "bottom": -20 } |
| -inset-y-6 | { "top": -24, "bottom": -24 } |
| -inset-y-7 | { "top": -28, "bottom": -28 } |
| -inset-y-8 | { "top": -32, "bottom": -32 } |
| -inset-y-9 | { "top": -36, "bottom": -36 } |
| -inset-y-10 | { "top": -40, "bottom": -40 } |
| -inset-y-12 | { "top": -48, "bottom": -48 } |
| -inset-y-16 | { "top": -64, "bottom": -64 } |
| -inset-y-20 | { "top": -80, "bottom": -80 } |
| -inset-y-24 | { "top": -96, "bottom": -96 } |
| -inset-y-32 | { "top": -128, "bottom": -128 } |
| -inset-y-40 | { "top": -160, "bottom": -160 } |
| -inset-y-48 | { "top": -192, "bottom": -192 } |
| -inset-y-56 | { "top": -224, "bottom": -224 } |
| -inset-y-64 | { "top": -256, "bottom": -256 } |
| -inset-y-px | { "top": -2, "bottom": -2 } |
| -inset-x-1 | { "right": -4, "left": -4 } |
| -inset-x-2 | { "right": -8, "left": -8 } |
| -inset-x-3 | { "right": -12, "left": -12 } |
| -inset-x-4 | { "right": -16, "left": -16 } |
| -inset-x-5 | { "right": -20, "left": -20 } |
| -inset-x-6 | { "right": -24, "left": -24 } |
| -inset-x-7 | { "right": -28, "left": -28 } |
| -inset-x-8 | { "right": -32, "left": -32 } |
| -inset-x-9 | { "right": -36, "left": -36 } |
| -inset-x-10 | { "right": -40, "left": -40 } |
| -inset-x-12 | { "right": -48, "left": -48 } |
| -inset-x-16 | { "right": -64, "left": -64 } |
| -inset-x-20 | { "right": -80, "left": -80 } |
| -inset-x-24 | { "right": -96, "left": -96 } |
| -inset-x-32 | { "right": -128, "left": -128 } |
| -inset-x-40 | { "right": -160, "left": -160 } |
| -inset-x-48 | { "right": -192, "left": -192 } |
| -inset-x-56 | { "right": -224, "left": -224 } |
| -inset-x-64 | { "right": -256, "left": -256 } |
| -inset-x-px | { "right": -2, "left": -2 } |
| -top-1 | { "top": -4 } |
| -top-2 | { "top": -8 } |
| -top-3 | { "top": -12 } |
| -top-4 | { "top": -16 } |
| -top-5 | { "top": -20 } |
| -top-6 | { "top": -24 } |
| -top-7 | { "top": -28 } |
| -top-8 | { "top": -32 } |
| -top-9 | { "top": -36 } |
| -top-10 | { "top": -40 } |
| -top-12 | { "top": -48 } |
| -top-16 | { "top": -64 } |
| -top-20 | { "top": -80 } |
| -top-24 | { "top": -96 } |
| -top-32 | { "top": -128 } |
| -top-40 | { "top": -160 } |
| -top-48 | { "top": -192 } |
| -top-56 | { "top": -224 } |
| -top-64 | { "top": -256 } |
| -top-px | { "top": -2 } |
| -right-1 | { "right": -4 } |
| -right-2 | { "right": -8 } |
| -right-3 | { "right": -12 } |
| -right-4 | { "right": -16 } |
| -right-5 | { "right": -20 } |
| -right-6 | { "right": -24 } |
| -right-7 | { "right": -28 } |
| -right-8 | { "right": -32 } |
| -right-9 | { "right": -36 } |
| -right-10 | { "right": -40 } |
| -right-12 | { "right": -48 } |
| -right-16 | { "right": -64 } |
| -right-20 | { "right": -80 } |
| -right-24 | { "right": -96 } |
| -right-32 | { "right": -128 } |
| -right-40 | { "right": -160 } |
| -right-48 | { "right": -192 } |
| -right-56 | { "right": -224 } |
| -right-64 | { "right": -256 } |
| -right-px | { "right": -2 } |
| -bottom-1 | { "bottom": -4 } |
| -bottom-2 | { "bottom": -8 } |
| -bottom-3 | { "bottom": -12 } |
| -bottom-4 | { "bottom": -16 } |
| -bottom-5 | { "bottom": -20 } |
| -bottom-6 | { "bottom": -24 } |
| -bottom-7 | { "bottom": -28 } |
| -bottom-8 | { "bottom": -32 } |
| -bottom-9 | { "bottom": -36 } |
| -bottom-10 | { "bottom": -40 } |
| -bottom-12 | { "bottom": -48 } |
| -bottom-16 | { "bottom": -64 } |
| -bottom-20 | { "bottom": -80 } |
| -bottom-24 | { "bottom": -96 } |
| -bottom-32 | { "bottom": -128 } |
| -bottom-40 | { "bottom": -160 } |
| -bottom-48 | { "bottom": -192 } |
| -bottom-56 | { "bottom": -224 } |
| -bottom-64 | { "bottom": -256 } |
| -bottom-px | { "bottom": -2 } |
| -left-1 | { "left": -4 } |
| -left-2 | { "left": -8 } |
| -left-3 | { "left": -12 } |
| -left-4 | { "left": -16 } |
| -left-5 | { "left": -20 } |
| -left-6 | { "left": -24 } |
| -left-7 | { "left": -28 } |
| -left-8 | { "left": -32 } |
| -left-9 | { "left": -36 } |
| -left-10 | { "left": -40 } |
| -left-12 | { "left": -48 } |
| -left-16 | { "left": -64 } |
| -left-20 | { "left": -80 } |
| -left-24 | { "left": -96 } |
| -left-32 | { "left": -128 } |
| -left-40 | { "left": -160 } |
| -left-48 | { "left": -192 } |
| -left-56 | { "left": -224 } |
| -left-64 | { "left": -256 } |
| -left-px | { "left": -2 |
Custom
To add custom Top, Right, Bottom, Left. You just need to add spacing object into your osmi.config.js fle.
export default {
spacing: {
// custom spacing
},
};
Example
spacing: {
"lg": 40
},
Custom Syntax Usage
apply("top-lg");