Margin
Box component supports multiple props for controlling an element’s margin.
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 margin of elements.
m=4
m=sm
m=md
m=lg
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box m="4">m=4</Box>
<Box m="sm">m=sm</Box>
<Box m="md">m=md</Box>
<Box m="lg">m=lg</Box>
</Canvas>
);
}#
Multiple sides
#
m=lg
mx=lg
my=lg
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box m="lg">m=lg</Box>
<Box mx="lg">mx=lg</Box>
<Box my="lg">my=lg</Box>
</Canvas>
);
}#
Single side
#
mt=sm
mr=md
mb=lg
ml=xl
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box mt="sm">mt=sm</Box>
<Box mr="md">mr=md</Box>
<Box mb="lg">mb=lg</Box>
<Box ml="xl">ml=xl</Box>
</Canvas>
);
}#
Negative
#
mt=-4
mr=-md
mb=-lg
ml=-xl
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas p="xs">
<Box mt="-4">mt=-4</Box>
<Box mr="-md">mr=-md</Box>
<Box mb="-lg">mb=-lg</Box>
<Box ml="-xl">ml=-xl</Box>
</Canvas>
);
}