Padding

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

Atomic Props	CSS 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.

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

Result

Live Editor

<Box p-10 bgRed300 inlineBlock>
  p-10
</Box>

<Box p-10 bgRed300 inlineBlock>
  p-10
</Box>

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

Result

Live Editor

<Box toCenter debugChildren>
  <Box pt-20>pt-20</Box>
  <Box pr-20>pr-20</Box>
  <Box pb-20>pb-20</Box>
  <Box pl-20>pl-20</Box>
</Box>

<Box toCenter debugChildren>
  <Box pt-20>pt-20</Box>
  <Box pr-20>pr-20</Box>
  <Box pb-20>pb-20</Box>
  <Box pl-20>pl-20</Box>
</Box>

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

Result

Live Editor

<Box px-20 bgRed300 inlineBlock>
  px-20
</Box>

<Box px-20 bgRed300 inlineBlock>
  px-20
</Box>

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

Result

Live Editor

<Box py-10 bgRed300 inlineBlock>
  py-10
</Box>

<Box py-10 bgRed300 inlineBlock>
  py-10
</Box>