StylingMargin

Margin

Box component supports multiple props for controlling an element’s margin.

Name

Value

Pixels

 

0

2

4

6

8

10

12

16

20

24

32

40

48

64

80

auto

#

Documentation

#

Usage

Use the space scale to set the margin of elements.

m=4

m=8

m=16

m=24

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box m="4">m=4</Box>
      <Box m="8">m=8</Box>
      <Box m="16">m=16</Box>
      <Box m="24">m=24</Box>
    </Canvas>
  );
}

#

Multiple sides

m=24

mx=24

my=24

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box m="24">m=24</Box>
      <Box mx="24">mx=24</Box>
      <Box my="24">my=24</Box>
    </Canvas>
  );
}

#

Single side

mt=12

mr=16

mb=24

ml=32

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box mt="12">mt=12</Box>
      <Box mr="16">mr=16</Box>
      <Box mb="24">mb=24</Box>
      <Box ml="32">ml=32</Box>
    </Canvas>
  );
}
GapPadding