HTML CSS Padding
Padding is the area the content of the box is "padded" with. In other words, the area surrounding the HTML text, or other content, to the border. Coding for padding is very similar to the rules for coding the Margins in CSS. Padding in a CSS element totals 50 pixels (50px).
As with margins, there are 4 properties. However, unlike with margins, you cannot use negative values.
If you do not declare any values, the default value is 0
- padding-top: length (px) or percentage (%)
- padding-right: length (px) or percentage (%)
- padding-bottom: length (px) or percentage (%)
- padding-left: length (px) or percentage (%)
For Example:
p {
padding-top:40px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 40px;
}
As with margins, you can code for all 4 elements with just one statement:
p {
padding: 40px 50px 50px 40px;
}
When declaring all 4 values with one statement, the values are determined as follows:
- Top
- Right
- Bottom
- Left
You do not have to declare all 4 values. You can declare 4, 3, 2 or 1.
-
p { padding: 25px 50px 75px 100px; }
- top-padding: 25px;
- bottom-padding 50px;
- right-padding 75px;
- left-padding 100px;
-
p { padding: 25px 50px 75px; }
- top-padding: 25px;
- bottom-padding 75px;
- right-padding 50px;
- left-padding 50px;
-
p { padding: 25px 50px; }
- top-padding: 25px;
- bottom-padding 25px;
- right-padding 50px;
- left-padding 50px;
-
p { padding: 25% ; }
- top-padding: 25%;
- bottom-padding 25%;
- right-padding 25%;
- left-padding 25%;
I hope you will join us for the next lesson Lesson 9) Text
Additional Resources