数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 设置元素周围的填充？
CSS 中的 padding 属性用于设置内容与容器边界之间的内部空间。使用 padding 属性定义的空间将设置在容器的内容周围，而不是容器本身周围。它将设置容器内部的空间，而不是外部空间。
让我们看看使用 CSS 在元素周围应用填充的不同方法。
如下所示，我们可以使用 CSS 设置元素内容周围填充的两种方法：
为每一侧使用单独的 padding 属性。
为所有侧使用简写 padding 属性。
让我们通过单独的代码示例了解以上在 CSS 中应用 padding 属性的方法。
为每一侧使用单独的属性
在这种方法中，我们将使用单独的 padding 属性来定义和应用元素周围的填充。单独的属性将仅将填充应用于元素的特定一侧。
语法
以下语法将显示如何为容器的每一侧使用单独的 padding 属性：
padding-top: padding top value padding-bottom: padding bottom value padding-left: padding left value padding-right: padding right value
现在让我们了解如何使用单独的 padding 属性来定义和应用容器内容周围的不同填充。
算法
步骤 1 - 在第一步中，我们将定义两个不同的 HTML 元素以查看单独 padding 属性的用法。
步骤 2 - 在下一步中，我们将对一个元素应用相同值的单独 padding 属性，对另一个元素应用不同值的单独 padding 属性。
步骤 3 - 在最后一步中，我们将为这两个元素添加边框，并查看内容与容器边界之间的间隙。
示例
以下示例将解释如何使用 CSS 中的单独 padding 属性在元素内容周围应用填充：
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 20px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 20px;
padding-right: 10px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<center>
<h3>The padding around the content of below containers is applied using the individual CSS properties.</h3>
<div class = "main-container">
<div class = "container-1">
<p><strong>Container with different padding values for different sides </strong> </p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class = "container-2">
<p><strong>Container with same padding values for all sides </strong> </p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
</center>
</body>
</html>
在上面的示例中，我们对两个不同的容器使用了具有不同值和相同值的单独 padding CSS 属性，以查看这些属性的实现，这些属性为不同的侧分配不同的填充，并为元素的所有侧分配相同的填充。
为所有侧使用简写 padding 属性
要将填充应用于元素的所有侧，可以使用简写属性 `padding`。它将设置内容所有侧周围的填充。此简写属性可以以四种不同的方式使用，如下所示。
使用单个值 - 简写 padding 属性可以仅使用一个值。容器内容所有侧周围的填充将设置为该特定值。
语法
padding: padding_value; // it will set the same padding around all sides.
使用两个值 - 您也可以将 padding 属性与两个值一起使用。它将第一个值设置为顶部和底部填充，第二个值设置为具有相同值的左侧和右侧填充。
语法
padding: top/bottom_padding_value left/right_padding_value;
使用三个值 - 如果您将简写属性与三个值一起使用，它将第一个值设置为顶部填充，第二个值设置为左侧和右侧填充，第三个值设置为底部填充。
语法
padding: top_padding left/right_padding bottom_padding
使用四个值 - 当 padding 属性与四个值一起使用时，它将为容器的所有不同侧分配值。第一个值对应于顶部填充，第二个值对应于右侧填充，第三个值对应于底部填充，第四个值对应于左侧填充值。
语法
padding: top right bottom left
现在让我们使用所有上述语法实现 padding 属性，并通过代码示例在实践中详细了解它。
算法
此示例的算法与前一个示例几乎相同。您只需要向 HTML 文档添加两个元素，并使用上述语法将填充应用于这些元素的所有侧。
示例
以下示例将说明如何使用具有不同数量值的简写 padding 属性，如上所述：
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 20px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 15px 10px;
}
.container-3{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px 15px 30px;
}
.container-4{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 20px 10px 30px 5px;
}
</style>
</head>
<body>
<center>
<h3>The padding around the content of below containers is applied using the shorthand padding CSS property.</h3>
<div class = "main-container">
<div class = "container-1">
<p><strong>Container with one single padding value for all sides</strong></p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class = "container-2">
<p><strong>Container with two values for the padding property </strong></p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class = "container-3">
<p><strong>Container with three values for the padding property </strong></p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class = "container-4">
<p><strong>Container with four values for the padding property </strong></p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
</center>
</body>
</html>
在上面的示例中，我们使用了不同数量的值的 padding 属性，甚至使用了不同的值来将不同的填充应用于容器元素的每一侧，以查看使用任何数量的值（但不超过四个，不少于一个）的 padding 属性之间的区别。
结论
在本文中，我们学习了 CSS 中的 padding 属性，并通过每个用例的代码示例了解了它在不同用例中的用法。我们讨论了单独的 padding 属性和简写 padding 属性，并通过使用代码示例在实践中详细了解它们。
81 次浏览
