Css 简明教程
CSS - Paddings
CSS 填充用于在元素边框和内容之间创建额外的空间。在本文中,我们将学习与之相关的不同类型的填充和属性。
CSS padding is used to creates extra space between border of element and it’s contents. In this article we will learn different types of padding and properties associated with it.
What is CSS Padding?
在 CSS 中,填充是一个用于在元素边界内创建附加间距的属性。填充的默认值为 0。填充值为 0 表示内容(主要是文本内容)将从元素本身的边框开始。
In CSS, padding is a property that is used to create additional spacing inside the boundary of an element. The default value for padding is zero. A padding value zero indicate that content (mostly text contents) will start from the border of element itself.
CSS Padding Example
你可以在以下部分尝试使用不同方式创建填充,还可以更改值。
You can try different ways to use to create padding in the below section and you can change the values as well.
Define Padding
若要对任何 HTML 元素定义任何填充,可以使用 * CSS padding property* ,该属性是 'padding-top', 'padding-right', 'padding-bottom' 和 'padding-left' 属性的速记属性。单个值将为元素周围生成填充。
To define any padding on any HTML element you can use CSS padding property, this property is shorthand property of 'padding-top', 'padding-right', 'padding-bottom' and 'padding-left' properties. A single value will generate padding all around the element.
Example
如你在此示例中所看到的,我们在 * paragraph* 元素周围生成了 5px 的填充,并用淡绿色背景突出显示了填充区域。
As you can see in this below example we have generated 5px padding surrounding the paragraph element and highlight the padding area with light-green background.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: white;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h3>CSS Padding</h3>
<div>
<p style="padding: 5px;">
CSS Padding Applied on Paragraph Element
</p>
</div>
</body>
</html>
Padding Individual Sides
正如我们前面提到的,填充是所有单独边距填充的速记属性。你可以为顶部、右侧、底部和左侧设置不同的填充值。
As we have mentioned earlier the padding is shorthand property for all Individual sides padding. You can set different padding values for top, right, bottom and left sides.
-
padding-top: This property is used to set the padding top on any element.
-
padding-right: This property is used to set the padding right on any element.
-
padding-bottom: This property is used to set the padding bottom on any element.
-
padding-left: This property is used to set the padding left on any element.
您可以查看附带的图片以更清楚地了解各个边框内边距。
You can check the attached image for more clarity on individual side paddings.

Syntax
padding-top: "value";
padding-right: "value";
padding-bottom: "value";
padding-left: "value";
Example
在此示例中,我们创建了 4 个不同的元素,并使用上述属性在每个元素的各个边上生成了内边距。
In this example we have create 4 different element and generated padding on each element’s individual sides with the above mentioned properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
}
span {
background-color: white;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Padding</h3>
<div>
<p style="padding-top: 15px;">
<span>CSS Padding Top Applied on Paragraph Element</span>
</p>
<p style="padding-right: 15px;">
<span>CSS Padding Right Applied on Paragraph Element</span>
</p>
<p style="padding-bottom: 15px;">
<span>CSS Padding Bottom Applied on Paragraph Element</span>
</p>
<p style="padding-left: 15px;">
<span>CSS Padding Left Applied on Paragraph Element</span>
</p>
</div>
</body>
</html>
Different Ways to Apply Padding on HTML Elements
有四种方法可以为 CSS 内边距属性提供值,所有这些方法都已提及,并在下面使用完整的示例代码进行了描述。
There are four ways to provide value to the CSS padding property all of them are mentioned and described bellow with the complete example code.
-
Single Values: Here you can provide a single value to the padding property that same value will be applicable on four sides of the the element.
-
Two Values: Here you have to provide two values that will be used as top, bottom and right, left padding value.
-
Three Values: In this way you can provide three values that will define top, left, right and bottom value. Like if you set padding: 20px 40px 10px. In this case top padding will be 20px, right and left paddings will be 40px and bottom padding will be 10px.
-
Four Values: If you provide four values to the padding property it will generate top padding from first value, right padding from 2nd value and so on.
Syntax
padding: "value" // Single Value
padding: "value value" // Two Values
padding: "value value value" // Three Values
padding: "value value value value" // Four Values
Example
在以下示例中,我们创建了一个不同的元素,并使用内联 css 以不同的方式在元素周围生成了内边距。
In this following example we have crated a four different element and used inline css to generate padding around the element in different ways.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Padding</h3>
<div>
<p style="padding: 20px">
<span>Padding property with Single Value</span>
</p>
<p style="padding: 10px 20px">
<span>Padding property with two Values</span>
</p>
<p style="padding: 10px 15px 20px">
<span>Padding property with three Values</span>
</p>
<p style="padding: 5px 10px 15px 20px">
<span>Padding property with four Values</span>
</p>
</div>
</body>
</html>
Padding Mix up Units
在 shorthand 属性中指定内边距值时,CSS 并不限制使用多个单位。这意味着可以传递像素作为长度值,以及 em 或英寸等。
CSS does not restrict usage of multiple units for specifying the values of padding, while specifying in shorthand property. That means one can pass values of length as pixel along with ems or inches, etc.
Example
在以下示例中,我们将为内边距属性提供 4 个值,但每个值都将以不同的单位提及。
In this following example we will provide 4 values on padding property but each value will be mentioned in different units..
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
padding: 20px 4ex .5in 3em;
background-color: silver;
}
</style>
</head>
<body>
<div>
<h2>
The different length units are passed
as padding values to the h2 element.
</h2>
</div>
</body>
</html>
Padding Percentage Values
内边距属性可以有 CSS 允许的百分比值。百分比相对于父元素内容区域的宽度进行计算。
Padding property can have a percentage value passed, as CSS allows it. Percentages are calculated in relation to the width of the parent element’s content area.
Example
在此示例中,我们将为内边距属性提供百分比值,此百分比取决于父元素内容区域的宽度。
Here in this example we will provide values for padding property in percentage, this percentage is depend on the width of the parent element’s content area.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
}
p {
padding: 10%;
background-color: silver;
}
</style>
</head>
<body>
<div>
<p>
The padding defined for p element is
10%, which is calculated as 10% of
width of parent element, which means
it is 10% of 300px and that is 30px.
</p>
</div>
</body>
</html>