Padding

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

Atomic PropsCSS Properties
p-{value} / p={value}padding: {value};
pt-{value} / pt={value}padding-top: {value};
pr-{value} / pr={value}padding-right: {value};
pb-{value} / pb={value}padding-bottom: {value};
pl-{value} / pl={value}padding-left: {value};
px-{value} / px={value}padding-left: {value}; padding-right: {value};
py-{value} / py={value}padding-top: {value}; padding-bottom: {value};

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

Padding of all sides#

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

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

Padding of one side#

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

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

Horizontal padding#

Control the horizontal padding of an element using the px-{value} Atomic Props.

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

vertical padding#

Control the vertical padding of an element using the py-{value} Atomic Props.

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