数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 设置元素内部的内边距？
CSS 中的内边距用于在元素内容周围留出一些空间。您可以围绕元素包含的任何类型的内容添加空间。内容可以是直接文本，也可以是其内部的任何其他嵌套元素。您可以轻松地添加要在内容与元素边界之间设置的空间。内边距是内部空间，仅围绕内容以及元素的边界和内容之间设置。
让我们看看如何使用 CSS 在元素内部内容周围添加内边距。CSS 中有两种方法可以在元素内部添加内边距。您可以使用 CSS 的简写padding属性或单独的属性来分别为每一侧添加内边距。
现在让我们借助代码示例，详细了解以上两种添加容器内部内边距的方法。
使用简写 padding 属性
在这种方法中，您只需要使用 padding 属性和不同数量的值来设置元素内部的内边距。
语法
以下语法将帮助您了解使用不同数量值的 padding 属性：
padding: number_value px; // will set same padding as given to all sides. padding: number_value1 px number_value2 px; // will set forst value as top and bottom padding, while second as left and right. padding: number_value1 px number_value2 px number_value3 px; // will set first value as top padding, second as left and right and third as bottom padding. padding: number_value1 px number_value2 px number_value3 px number_value4 px; // will set all four values to all four different sides in order top -> right -> bottom -> left respectively.
现在让我们实际应用这种方法，并使用 padding 属性和不同数量的值来设置元素内部的内边距，如语法中所述。
步骤
步骤 1 - 在第一步中，我们将定义一个包装元素，其中包含所有其他元素。
步骤 2 - 在下一步中，我们将定义不同的元素，以使用不同数量的值来设置其内容周围的 padding 属性。
步骤 3 - 在最后一步中，我们将在上一步创建的元素内部定义内部容器，这些容器包含一些文本内容，我们将使用其父元素上的 padding 属性在其周围设置内边距。
示例
以下示例将向您解释 padding 属性如何使用不同的值，以及它在使用这些值时的行为：
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 20px 10px;
}
.container-3{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 10px 20px 10px;
}
.container-4{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 25px 15px 5px 10px;
}
.inner-container{
border: 2px solid black;
padding: 5px;
}
</style>
</head>
<body>
<center>
<h2>Setting the padding inside an element using CSS</h2>
<p>The padding around the inner element of below containers is applied using the shorthand padding CSS property.</p>
<div class = "main-container">
<div class = "container-1">
<div class = "inner-container">
<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>
<div class = "container-2">
<div class = "inner-container">
<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>
<div class = "container-3">
<div class = "inner-container">
<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>
<div class = "container-4">
<div class = "inner-container">
<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>
</div>
</center>
</body>
</html>
在上面的示例中，我们使用了简写 padding 属性来设置元素内部内容周围的内边距。我们使用不同数量的值来设置 padding 属性，并查看每个值的行为。
现在让我们了解使用单独属性在元素内部设置内边距的第二种方法。
使用单独的 padding 属性
我们可以使用每个侧面的单独 padding 属性在元素内部设置内边距，如下面的语法所示。
语法
此语法将向您展示如何为每一侧使用不同的 padding 属性来设置不同的内边距：
padding-top: number_value px; padding-bottom: number_value px; padding-left: number_value px; padding-right: number_value px;
现在让我们了解使用这种方法在元素内部设置内边距的实际实现。
方法
此示例的方法与上述示例几乎相同。您只需要将 padding 简写属性替换为单独属性方法，并减少元素的数量。
示例
以下示例将说明代码中根据算法进行的更改，以使用单独属性方法：
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding-top: 30px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 10px;
}
.inner-container{
border: 2px solid black;
padding: 5px;
}
</style>
</head>
<body>
<center>
<h2>Setting the padding inside an element using CSS</h2>
<p>The padding around the inner element of below containers is applied using the shorthand padding CSS property.</p>
<div class = "main-container">
<div class = "container-1">
<div class = "inner-container">
<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>
<div class = "container-2">
<div class = "inner-container">
<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>
</div>
</center>
</body>
</html>
在此示例中，我们使用了单独的 padding 属性方法来设置元素内部内容容器周围的内边距，该容器包含文本内容。
结论
在本文中，我们学习了使用 CSS 在元素内部设置内边距的两种不同方法。我们通过使用每个方法的不同代码示例来实际实现它们，并详细讨论并理解了这两种方法。
更新于： 2023年11月20日
171 次浏览
广告