13. Margin

With margins we can add space between elements. In fact, many tags already have a default margin that we can override, such as headings (h1, h2...), paragraphs (p), etc.

We have styles to specify one side, or even several at once.

margin-top

Top margin.

.elemento {
    margin-top: 1rem;
}

margin-right

Right margin.

.elemento {
    margin-right: 2rem;
}

margin-bottom

Bottom margin.

.elemento {
    margin-bottom: 3rem;
}

margin-left

Left margin.

.elemento {
    margin-left: 4rem;
}

margin-inline

Left and right margin.

.elemento {
    margin-inline: 5rem;
}

To apply a different padding to each side, we can use the following syntax:

.elemento {
    margin-inline: 5rem 1rem;
}

The first value being the left padding and the second the right.

margin-block

Top and bottom margin.

.elemento {
    margin-block: 6rem;
}

To apply a different padding to each side, we can use the following syntax:

.elemento {
    margin-block: 6rem 1rem;
}

The first value being the top padding and the second the bottom.

margin

It lets us define several sides in a single line, although it is a bit more complex to memorize.

.elemento {

    /* All sides */
    margin: 5rem;

    /*
    Top and bottom: 6rem
    Right and left: 1rem
    */
    margin: 6rem 1rem;

    /*
    Top: 6rem
    Right and left: 3rem
    Bottom: 1rem
    */
    margin: 6rem 3rem 1rem;

    /*
    Top: 1rem
    Right: 2rem
    Bottom: 3rem
    Left: 4rem
    */
    margin: 1rem 2rem 3rem 4rem;

}

More information

Even though you can use margin: 0 auto to horizontally center a block element, in modern browsers you should use display: flex; justify-content: center; on its parent element.