Margin

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

Atomic PropsCSS 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.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Margin of one side#

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Horizontal margin#

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Vertical marign#

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

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.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO