Padding
Box component supports multiple props for controlling an element’s padding.
Name | Value | Pixels |
|
|---|---|---|---|
xs | 0.5rem | 8px | |
sm | 0.75rem | 12px | |
md | 1rem | 16px | |
lg | 1.5rem | 24px | |
xl | 2rem | 32px | |
0 | 0 | 0 | |
2 | 0.125rem | 2px | |
4 | 0.25rem | 4px | |
6 | 0.375rem | 6px | |
8 | 0.5rem | 8px | |
10 | 0.625rem | 10px | |
12 | 0.75rem | 12px | |
16 | 1rem | 16px | |
20 | 1.25rem | 20px | |
24 | 1.5rem | 24px | |
32 | 2rem | 32px | |
48 | 3rem | 48px | |
64 | 4rem | 64px | |
80 | 5rem | 80px |
#
Documentation
#
#
Usage
#
Use the space scale to set the padding of elements.
p=48
p=sm
p=md
p=lg
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box p="48">p=48</Box>
<Box p="sm">p=sm</Box>
<Box p="md">p=md</Box>
<Box p="lg">p=lg</Box>
</Canvas>
);
}#
Multiple sides
#
p=lg
px=lg
py=lg
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box p="lg">p=lg</Box>
<Box px="lg">px=lg</Box>
<Box py="lg">py=lg</Box>
</Canvas>
);
}#
Single side
#
pt=sm
pr=md
pb=lg
pl=xl
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box pt="sm">pt=sm</Box>
<Box pr="md">pr=md</Box>
<Box pb="lg">pb=lg</Box>
<Box pl="xl">pl=xl</Box>
</Canvas>
);
}