Padding

The padding sits between the border and the content area.
Unlike paddings you cannot have negative amounts of padding, so the value must be 0 or a positive value.
Any background applied to your element will display behind the padding, and it is typically used to push the content away from the border.
For the examples below, let's assume that our HTML boxes without style are white square and the ones stylized are grey.
In the stylized boxes the lighter grey is the active content box.

Margin & padding values

Name Value
none 0px
xxs 4px
xs 8px
s 12px
m 16px
l 24px
xl 32px
xxl 64px

Basic usage

We can control the padding on each side of an element individually using the padding property, or each side individually using the equivalent longhand properties. We'll use the 'S' size but every other size will work too.