CSS Padding

CSS Padding

The CSS Padding property defines the space between the element's border and its content.

Padding

When the element's Padding (padding) is cleared, the "released" area will be filled with the element's background color.

Use the fill attribute alone to change the top, bottom, left, and right padding. The abbreviation fill attribute can also be used, once changed everything changes.

This shorthand property sets the width of all padding on an element, or sets the width of padding on each side. Padding set on inline, non-replaced elements does not affect line height calculations; therefore, if an element has both padding and a background, it may visually extend into other lines, possibly with

Other content overlaps. The element's background extends across the padding. Negative margin values ​​are not allowed.

padding-top:20px;top padding

padding-right:30px;right padding

padding-bottom:30px; Bottom padding

padding-left:20px;left padding

padding:1px unified padding on all four sides

padding:1px1px top and bottom, left and right padding

padding: 1px1px1px top, left and right, bottom padding

padding: 1px1px1px1px top, right, bottom, left padding

Comment: No Negative values ​​are allowed.

Possible values

auto: The browser calculates the margins

length: Specifies the margin value in specific units, such as pixels, centimeters, etc. The default value is 0px.

%: Specifies margins as a percentage of the width of the parent element.

inherit: Specifies that margins should be inherited from the parent element.

padding: Use abbreviation attributes to set all padding properties in one declaration

padding-bottom: Set the bottom padding of the element

padding-left: Set the left part of the element Padding

padding-right: Set the right padding of the element

padding-top: Set the top padding of the element


##

Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p.ex1 {padding:2cm;} p.ex2 {padding:0.5cm 3cm;} </style> </head> <body> <p class="ex1">这个文本填充两边相等。填充每边2厘米。</p> <p class="ex2">这个文本有一个顶部和底部填充0.5厘米和3厘米的左和右填充。</p> </body> </html>
submitReset Code