Home > Article > Web Front-end > Detailed explanation of padding in css
Detailed explanation of padding in css
- 迷茫Original
- 2017-03-25 15:34:492241browse
Syntax:
padding：[
Default value: Look at each individual attribute
Applies to : all elements except table-row-group | table-header-group | table-footer-group | table-column-group | table- row Outer
Inheritance: None
Animation: Yes
Calculated value: See Each independent attribute
Related attributes: [ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]
Value:
: Use the length value to define inner padding. Negative values are not allowed : Use percentage to define inner padding. In horizontal (default) writing mode, refer to the width of its containing block for calculation, and in other cases, refer to height. Negative values are not allowed
Description:
Retrieves or sets the internal margins on the four sides of the object.
If all four parameter values are provided, the four sides will be applied in the order of upper, right, lower, and left.
If only one is provided, it will be used for all four sides.
If two are provided, the first one is for up and down, and the second one is for left and right.
If three are provided, the first is for top, the second is for left and right, and the third is for bottom.
Non-Replaced inline elements can use this attribute to set the inner patches on the left and right sides; if you want to set the inner patches on the top and bottom sides, you must first make the object Appears as block level or inline block level. The corresponding script feature of
is padding.
TRBL
padding value abbreviation
padding : 20px; == padding : 20px 20px 20px 20px;
padding : 20px 10px; = = padding : 20px 10px 20px 10px;
##padding : 20px 10px 30px == padding : 20px 10px 30px 10px;
If the opposite sides are equal, the latter is omitted; if 4 sides are equal, only one<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>padding 填充</title>
<style type="text/css">
p,span{
border: 1px dashed red;
}
.sample0{
padding: 20px;
}
.sample1{
padding: 40px 30px 20px 10px;
}
.sample2{
padding: 20px 10px 20px;
}
.parent{
padding:20px;
}
.child{
border: 1px solid blue;
}
</style></head><body>
<p class="sample0">sample</p><br>
<p class="sample1">sample</p>
<br>
<p class="sample2">sample</p>
<br>
<p class="parent">
<p class="child">child </p>
</p></body></html>
The above is the detailed content of Detailed explanation of padding in css. For more information, please follow other related articles on the PHP Chinese website!