padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Shortened feature of padding
To shorten the code, you can use the padding,
abridged property padding,
putting it all in a single property.
If the padding property has 4 values
padding: 25px 50px 75px 100px;
div {
padding: 25px 50px 75px 100px;
}
If the padding property has 3 values
padding: 25px 50px 75px;
div {
padding: 25px 50px 75px;
}
If the padding property has 2 values
padding: 25px 50px;
div {
padding: 25px 50px;
}
If the padding property has 1 value
padding: 25px;
div {
padding: 25px;
}
Width of padding and element
The width
property of CSS determines the width of the content area within the element, which is the part of the element's padding,
border, and margin.
Illustration of element padding, border, and margin properties
If the element has a certain width, the added padding
will add to the total width of the element, which will often cause unexpected results.
In the example below element
300px wide but the width of the element is realistic
This will be 350px (300px + 25px of left
padding
part + 25px right padding
part).
div {
width: 300px;
padding: 25px;
}
To keep the total width of 300px, no matter how wide the padding
part is, use the box-sizing
to keep the width. If you increase the padding,
part, the content inside will decrease to the total width unchanged.
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Last lesson: CSS margin
Lesson: Height and width in CSS