Margin

The margin is an invisible space around your HTML box. It pushes other elements away from the box.
Margins can have positive or negative values.
Setting a negative margin on one side of your box can cause it to overlap other things on the page.
Whether you are using the standard or alternative box model, the margin is always added on after the size of the visible box has been calculated.
For the examples below, let's assume that our HTML boxes without style are white square and the ones stylized are grey.

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 margin 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.