Padding & Margin
Both padding and margin can take a variety of inputs:
Remember that the Box component in the examples can be replaced by any other Chakra UI component, like Button, Text, Flex, etc., because all Chakra UI components have these spacing props.
The Box component shown below can be imported as:
Here 4 is not pixels, but units from the Chakra UI's theme spacing scale.
In this case, pt stands for padding-top. You can use similar conventions for padding-right (pr), padding-bottom (pb), padding-left (pl), and for both x-axis and y-axis simultaneously (px, py).
Margin works just like padding.
Here, mt stands for margin-top. Similar to padding, you can also use margin-right (mr), margin-bottom (mb), margin-left (ml), and for both x-axis and y-axis simultaneously (mx, my ).
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3