Detailed explanation of padding in css-CSS Tutorial-php.cn

Detailed explanation of padding in css

迷茫

Release： 2017-03-25 15:34:49

Original

2287 people have browsed it

Syntax:

padding：[ | ]{1,4}

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

Detailed explanation of padding in css

##Extension: margin,border

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>

Copy after login

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!