CSS Basic Tutorial

CSS Box Model

CSS3Basic Tutorial

CSS Reference Manual

CSS @rule (RULES)

CSS Padding (Padding)

CSS padding (padding) is a shorthand property that defines the space between the element's border and its content, that is, the internal padding on the top, right, bottom, and left.

CSS Padding Property

The CSS padding property allows you to set the padding area between the element's border and its content. Padding is affected bybackground-colorThe impact of the box.

Define padding for each face

You can use the CSS padding property to easily specify different padding for different sides of the element (such as top, right, bottom, or left) with the help of the separate padding property.

Example

h1　{
　　　　padding-bottom:　10px;
}
p　{
　　　　padding-top:　20px;
　　　　padding-left:　50px;
}

Test to see‹/›

Padding Abbreviated Shorthand Attribute

The padding property is a shorthand property to avoid setting the padding separately on each side of the element.padding-top，padding-right，padding-bottom，padding-left。

Example

h1　{
　　　　padding:　10px　20px;
}
p　{
　　　　padding:　10px　15px　20px　25px;
}

Test to see‹/›

Note:With CSS marginDifferent attributes, the value of the padding attribute cannot be negative. Like the margin attribute, the percentage value of the padding attribute refers to the width of the containing block of the generated box.

The padding property can take one, two, three, or four space-separated values.

If setOne valueThen it will be applied to all four sides.
If specifiedTwo valuesThen the first value will be applied to the top and bottom, and the second value will be applied to the right and left.
If specifiedThree valuesThen the first value is applied to the top, the second value is applied to the left and right, and the last value is applied to the bottom.
If specifiedFour valuesIf specified, they will be applied to the top, right, bottom, and left in the specified order.

CSS Border (Border)CSS Margin (Margin)