The padding property in CSS defines the innermost portion of the box model, creating space around an element’s content, inside of any defined margins and/or borders.
Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0.
Here’s a simple example:
|
1 2 3 |
.box { padding: 0 1.5em 0 1.5em; } |
The example above is using the padding shorthand property, which accepts up to four values, shown here:
|
1 2 3 |
.box{ padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left> } |
If fewer than four values are set, the missing values are assumed based on the ones that are defined. For example, the following two rule sets would get identical results:
|
1 2 3 |
.box{ padding: 0 1.5em } |
|
1 2 3 |
.box{ padding: 0 1.5em 0 1.5em; } |
Thus, if only one value is defined, this sets all four padding properties to the same value:
|
1 2 3 |
.box{ padding: 20px; } |
If three values are declared, it is padding: [top] [left-and-right] [bottom];
Any of the individual padding properties can be declared using longhand, in which case you would define only one value per property. So the previous example could be rewritten as follows:
|
1 2 3 4 5 6 |
.box{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } |
Sumber: https://css-tricks.com/almanac/properties/p/padding/
