CSS - padding - shorthand notation Property

Description

The shorthand notation means that code can be shortened by passing the padding values at once.

All the four values can be passed at a go or in a combination of one, two or three values at a time.

The rules for shorthand notation of padding for one, two, three and four value declarations is as follows:

number of value(s)	order
one	the same padding is applied to all the four sides
two	the first padding value applies to the top and bottom, the second value to the left and right sides
three	the first padding value applies to the top, the second value to the left and right sides, and the third value to the bottom
four	the padding values apply to the top, right, bottom, and left sides, in that order

Example

Here is an example of shorthand notation−

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding - shorthand notation</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h3>padding-shorthand properties</h3>
        <div>
            <p style="padding: 50px; border: 1px solid #0b0b0b;">This element has same padding on all the sides - 50px.</p>
            <p style="padding: 50px 10%; border: 1px solid #0b0b0b;">This element has top and bottom padding as 50px and right and left padding as 10%.</p>
            <p style="padding: 25px 40px 50px; border: 1px solid #0b0b0b;">This element has a top padding as 25px, left and right as 40px and bottom padding as 50px</p>
            <p style="padding: 10px 20px 30px 40px; border: 1px solid #0b0b0b;">This element has a top padding as 10px, left as 20px, right as 30px and bottom padding as 40px</p>
        </div>
    </body>
</html>