14. Padding

Unlike margin, it adds padding between the element and its content. However, it is not free to use; it is dangerous in a very tight design since it takes up space and increases the width or height of the element. You can remedy it with box-sizing: border-box;, which we will learn in the next lesson.

padding-top

Top padding.

.elemento {
    padding-top: 1rem;
}

padding-right

Right padding.

.elemento {
    padding-right: 2rem;
}

padding-bottom

Bottom padding.

.elemento {
    padding-bottom: 3rem;
}

padding-left

Left padding.

.elemento {
    padding-left: 4rem;
}

padding-inline

Left and right padding.

.elemento {
    padding-inline: 5rem;
}

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

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

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

padding-block

Top and bottom padding.

.elemento {
    padding-block: 6rem;
}

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

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

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

padding

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

.elemento {

    /* All sides */
    padding: 5rem;

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

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

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


}

More information