What could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand's features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly.
Padding properties set the size of the padding between the inside of an element’s border (if any) and the element itself.
Here are some examples:
p {
padding: 10px;
}
p {
padding: 10px 20px;
}
p {
padding: 10px 20px 10px;
}
p {
padding: 10px 20px 10px 20px;
}
Similar to margin properties, when only one value is given for the element, that value will be applied to each padding, in the following manner: "padding-top," "padding-right," "padding-bottom" and "padding left."
Taking a look at the second example, two values are defined. CSS will give the first value for "padding-top" and "padding-bottom." The second value will be assigned for "padding-right" and "padding-left."
The third example defines three padding values for the element. They will be evaluated by assigning the first value for "padding-top," the second for "padding-right," and the last for "padding-bottom."
Finally, our fourth example, with four padding values specified, will assign the values in a clockwise direction: "padding-top," "padding-right," "padding-bottom," and "padding-left" respectively.
Next, we will work with borders. Let’s take a look at the "border" shorthand property.