Margin

Control the margin of an element using the m{t|r|b|l|x|y}-{value} Atomic Props.

Atomic Props	CSS Properties
m-{value} / m={value}	margin: {value};
mt-{value} / mt={value}	margin-top: {value};
mr-{value} / mr={value}	margin-right: {value};
mb-{value} / mb={value}	margin-bottom: {value};
ml-{value} / ml={value}	margin-left: {value};
mx-{value} / mx={value}	margin-left: {value}; margin-right: {value};
my-{value} / my={value}	margin-top: {value}; margin-bottom: {value};

margin is a style attribute used frequently, so we use abbreviations.

Margin of all sides

Control the margin on all sides of an element using the m-{value} Atomic Props.

Result

Loading...

Live Editor

<Box bgGray100 toLeft> <Box bgGreen200 square-100 m-0> m-0 </Box> <Box bgGreen200 square-100 m={20}> m={'{20}'} </Box> <Box bgGreen200 square-100 m="40px"> m="40px" </Box> </Box>

<Box bgGray100 toLeft>
  <Box bgGreen200 square-100 m-0>
    m-0
  </Box>
  <Box bgGreen200 square-100 m={20}>
    m={'{20}'}
  </Box>
  <Box bgGreen200 square-100 m="40px">
    m="40px"
  </Box>
</Box>

Margin of one side

Control the margin on one side of an element using the m{t|r|b|l}-{value} Atomic Props.

Result

Loading...

Live Editor

<Box bgGray100 toLeft> <Box ml-10 bgGreen200 square-100> ml-10 </Box> <Box mt-10 bgTeal200 square-100> mt-10 </Box> <Box mr-10 bgRed200 square-100> mr-10 </Box> <Box mb-10 bgYellow200 square-100> mb-10 </Box> </Box>

<Box bgGray100 toLeft>
  <Box ml-10 bgGreen200 square-100>
    ml-10
  </Box>
  <Box mt-10 bgTeal200 square-100>
    mt-10
  </Box>
  <Box mr-10 bgRed200 square-100>
    mr-10
  </Box>
  <Box mb-10 bgYellow200 square-100>
    mb-10
  </Box>
</Box>

Horizontal margin

Control the horizontal margin of an element using the mx-{value} Atomic Props.

Result

Loading...

Live Editor

<Box bgGray100 toLeft> <Box mx-10 square-100 bgRed200> mx-10 </Box> </Box>

<Box bgGray100 toLeft>
  <Box mx-10 square-100 bgRed200>
    mx-10
  </Box>
</Box>

Vertical marign

Control the vertical margin of an element using the my-{value} Atomic Props.

Result

Loading...

Live Editor

<Box bgGray100 toLeft> <Box my-10 square-100 bgRed200> my-10 </Box> </Box>

<Box bgGray100 toLeft>
  <Box my-10 square-100 bgRed200>
    my-10
  </Box>
</Box>

Negative margins

Control the negative margin of an element using the m{t|r|b|l|x|y}--{value} Atomic Props.

Of course, you can also use ml={-10} to set negative margin of an element.

Result

Loading...

Live Editor

<Box m-20 bgGray200 square-200> <Box ml--20 square-100 bgRed500--T60> ml--20 </Box> <Box mt="-1rem" square-100 bgOrange400--T60> mt="-1rem" </Box> </Box>

<Box m-20 bgGray200 square-200>
  <Box ml--20 square-100 bgRed500--T60>
    ml--20
  </Box>
  <Box mt="-1rem" square-100 bgOrange400--T60>
    mt="-1rem"
  </Box>
</Box>