Skip to Content
StylingMargin

Margin

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

Name

Styles

0
2
4
6
8
10
12
16
20
24
32
40
48
64
80
auto

#

Documentation

#

Usage

Use the m prop to set the margin on all sides 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

Use the mx prop to set inline margin on left and right side and my prop to set block margin on top and bottom of elements.

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

Use the mt (margin-top), mr (margin-right), mb (margin-bottom), and ml (margin-left) props to set margins on individual sides of an element.

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>
  );
}
Last updated on
GapPadding