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
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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, theme } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      alignItems="center"
      flexDirection={["column", "row"]}
      gap="16"
      justifyContent="space-around"
      w="full"
    >
      <DemoBox m="4">m=4</DemoBox>
      <DemoBox m="8">m=8</DemoBox>
      <DemoBox m="16">m=16</DemoBox>
      <DemoBox m="24">m=24</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box rounded="sm" style={stripes}>
      <Box
        bg="bg.avatar.purple"
        fontFamily="mono"
        fontSize="md"
        fontWeight="600"
        p="16"
        rounded="sm"
        textAlign="center"
        {...props}
      >
        {children}
      </Box>
    </Box>
  );
}
 
const stripes = {
  backgroundColor: theme.colors["bg.secondary"],
  backgroundImage: `
    linear-gradient(
      135deg,
      ${theme.colors["bg.avatar.neutral"]} 10%,
      transparent 0,
      transparent 50%,
      ${theme.colors["bg.avatar.neutral"]} 0,
      ${theme.colors["bg.avatar.neutral"]} 60%,
      transparent 0,
      transparent
    )
  `,
  backgroundSize: "7px 7px",
};

#

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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, theme } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      alignItems="center"
      flexDirection={["column", "row"]}
      gap="16"
      justifyContent="space-around"
      w="full"
    >
      <DemoBox m="24">m=24</DemoBox>
      <DemoBox mx="24">mx=24</DemoBox>
      <DemoBox my="24">my=24</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box rounded="sm" style={stripes}>
      <Box
        bg="bg.avatar.purple"
        fontFamily="mono"
        fontSize="md"
        fontWeight="600"
        p="16"
        rounded="sm"
        textAlign="center"
        {...props}
      >
        {children}
      </Box>
    </Box>
  );
}
 
const stripes = {
  backgroundColor: theme.colors["bg.secondary"],
  backgroundImage: `
    linear-gradient(
      135deg,
      ${theme.colors["bg.avatar.neutral"]} 10%,
      transparent 0,
      transparent 50%,
      ${theme.colors["bg.avatar.neutral"]} 0,
      ${theme.colors["bg.avatar.neutral"]} 60%,
      transparent 0,
      transparent
    )
  `,
  backgroundSize: "7px 7px",
};

#

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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, theme } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      alignItems="center"
      flexDirection={["column", "row"]}
      gap="16"
      justifyContent="space-around"
      w="full"
    >
      <DemoBox mt="12">mt=12</DemoBox>
      <DemoBox mr="16">mr=16</DemoBox>
      <DemoBox mb="24">mb=24</DemoBox>
      <DemoBox ml="32">ml=32</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box rounded="sm" style={stripes}>
      <Box
        bg="bg.avatar.purple"
        fontFamily="mono"
        fontSize="md"
        fontWeight="600"
        p="16"
        rounded="sm"
        textAlign="center"
        {...props}
      >
        {children}
      </Box>
    </Box>
  );
}
 
const stripes = {
  backgroundColor: theme.colors["bg.secondary"],
  backgroundImage: `
    linear-gradient(
      135deg,
      ${theme.colors["bg.avatar.neutral"]} 10%,
      transparent 0,
      transparent 50%,
      ${theme.colors["bg.avatar.neutral"]} 0,
      ${theme.colors["bg.avatar.neutral"]} 60%,
      transparent 0,
      transparent
    )
  `,
  backgroundSize: "7px 7px",
};
Last updated on
DisplayObject Fit