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>
Advertisements
To Continue Learning Please Login