HTML block elements can receive inward and outward spacings,
called margins and paddings. They control either the distance between two sibling elements, or the padding
between a parent element's outer boundaries and its child elements.
The full syntax for all spacing classes is <spacing-type>-<side>-<size>,
as in margin-bottom-xs or padding-left-xl.
Omitting the side will give you the specified margin on all four sides (e.g. margin-xl,
You can also apply a standard spacing by leaving out the size. That is, margin-right will give you a
standard-sized margin to the right, and padding will give you a standard-sized padding on all four sides.
Using none for size will reset any existing margins or paddings on the specified side to zero.
Applying a margin to an element will move it away from its neighboring elements.
Applying a padding to an element will put space between its outer edge and its child elements.