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 "padding" is 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.
The value of the Padding property is in pixels px, cm, percentage %
CSS padding property
| Properties | Description |
|---|
| padding | Use abbreviated properties to set all padding properties in a declaration |
| padding-bottom | Set the bottom padding of the element |
| padding-left | Set the left padding of the element |
| padding-right | Set the right padding of the element |
| padding-top | Set the element's right padding Top padding |
In CSS, it is possible to specify different padding for different sides:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>
</html>Run the program to try it out
Padding - shorthand attribute
To shorten the code, it is possible to specify all the padding properties in one attribute.
This is the so-called abbreviation attribute. The abbreviation for all padding properties is "padding":
Padding property, which can have one to four values.
padding:25px 50px 75px 100px;
The top padding is 25px
The right padding is 50px
The bottom padding is 75px
The left padding is 100px
padding:25px 50px 75px;
The top padding is 25px
The left and right padding is 50px
The bottom padding is 50px 75px
padding:25px 50px;
top and bottom padding is 25px
left and right padding is 50px
padding:25px ;
All padding is 25px
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding:25px 50px;
}
</style>
</head>
<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>
</html>Run the program to try it
Example
Demonstrates the use of abbreviated attributes to set all populated properties in a declaration, which can have one to four values.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>
<body>
<p class="ex1">这个文本填充两边相等。填充每边2厘米。</p>
<p class="ex2">这个文本填充两边相等。填充每边2厘米。</p>
</body>
</html>Run the program and try it
#
Next Section