CSS padding is a shorthand property that defines the space between the element's border and its content, that is, the top, bottom, left, and right padding.
When an element's padding is cleared, the freed area will be filled with the element's background color.
Using the padding property alone can change the top, bottom, left and right padding.
1. Set padding using pixel value (px)
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>Easy Learning of CSS</title><styletype=text/css>p.nopadding{background-color:#00FFFF;}p.padding{ background-color:#00FF FF;padding-top:25px;padding-bottom:25px;padding-left:50px;padding-right:50px;}</style></head><body><p>This is a padding margin that is not specified Paragraph</p><p>This is a paragraph with specified padding margin size</p></body></html>Running results:
2. Use the margin abbreviation attribute to set the padding (cm value cm, percentage value %)
The padding shorthand property sets all padding properties in one declaration. This attribute can have 1 to 4 values.
Example:
(1) padding:10px 5px 15px 20px;
a. The top padding is 10px
b. The right padding is 5px
c. The bottom padding is 15px
d.The left padding is 20px
(2) padding:10px 5px 15px;
a. The top padding is 10px
b. The right padding and left padding are 5px
c. The bottom padding is 15px
(3)padding:10px 5px;
a. Top padding and bottom padding are 10px
b. The right padding and left padding are 5px
(4)padding:10px;
a. All four paddings are 10px
Note: Negative values are not allowed.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>Easy Learning of CSS</title><styletype=text/css>p{background-color:orange;}p.ex1{padding:2cm6cm3cm8cm ;}p.ex2{pad ding:5%30%;}</style></head><body><p>This is a paragraph with no padding margin size specified</p><p>This is a paragraph specified using "cmcm" Paragraph with padding margin size</p><p>This is a paragraph with padding margin size specified using "percent value %"</p></body></html>Running results:
