CSS Margins and Paddings

Margins are outside spacing and paddings are inside spacing.

Margins and padding have three kinds of representation.

Same around all direction

div{
    margin: 10px;
}

Applies 10px margin in all 4 directions.

Vertical and horizontal

div{
    padding: 10px 20px;
}

This applies 10px padding on vertical axis (top and bottom) and 10px on horizontal axis (left and right)

Different value for 4 directions

div{
    padding: 1px 2px 3px 4px;
}

This applies 1px padding on top

2px padding on right

3px padding on bottom

4px padding on left

(So this goes clockwise)

You can also write this in the long way -

div{
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 3px;
    padding-left: 4px;
}