Tailwind-like props for margin and padding

[vadimdemedes]

This PR adds shorthand props for margin and padding that are similar to Tailwind:

• margin → m
• marginX → mx
• marginY → my
• marginTop → mt
• marginBottom → mb
• marginLeft → ml
• marginRight → mr

<Box mt={2}>Top</Box>
<Box mb={2}>Bottom</Box>
<Box ml={2}>Left</Box>
<Box mr={2}>Right</Box>
<Box mx={2}>Left and right</Box>
<Box my={2}>Top and bottom</Box>
<Box m={2}>Top, bottom, left and right</Box>

• padding → p
• paddingX → px
• paddingY → py
• paddingTop → pt
• paddingBottom → pb
• paddingLeft → pl
• paddingRight → pr

<Box pt={2}>Top</Box>
<Box pb={2}>Bottom</Box>
<Box pl={2}>Left</Box>
<Box pr={2}>Right</Box>
<Box px={2}>Left and right</Box>
<Box py={2}>Top and bottom</Box>
<Box p={2}>Top, bottom, left and right</Box>

I think margin and padding-related props are among the most used ones and these shorthands should make it more convenient to use them.

[sindresorhus]

This kind of abbreviation is the one thing I don't like about Tailwind personally. Code should be written for readability. I don't know about VS Code, but Xcode would let me write <Box mt to get an autocomplete for <Box marginTop. So this could actually be resolved in the editor instead of ruining the code readability. There's also a big difference with Tailwind, Ink has far fewer properties and you can put properties on newlines, so there's less reason to optimize for conciseness.

[sindresorhus]

Works in VS Code too:

[vadimdemedes]

Ok, good points.