极客笔记哪个属性指定CSS中元素的右填充
在CSS中，填充属性允许我们在HTML元素的边框和内容之间添加额外的空间。右填充只是在元素的内容和右边框之间添加空间。
在这里，我们将学习两种不同的属性来指定元素的右填充。
使用padding-right CSS属性
‘padding-right’属性指定CSS中元素的右填充。当我们为元素指定右填充时，元素的宽度变为实际宽度+右填充。
语法
用户可以按照以下语法来指定元素的右填充。
padding-right: 100px;
示例1
在下面的示例中，父级div包含多个子div。我们使用CSS属性’padding-right’，为父级div指定了’300px’的右内边距。此外，我们为所有子div元素指定了100px的右内边距。
在输出中，用户可以观察到右边框和子div之间的300px间隔。同时，在右边框和文本内容之间还有100px的间距。
<html>
<style>
.parent {
width: 300px;
height: 400px;
border: 2px solid red;
padding-right: 300px;
display: flex;
flex-wrap: wrap;
}
.child {
width: 200px;
height: 100px;
border: 2px solid green;
padding-right: 100px;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "parent">
<div class = "child"> This is a child div. </div>
<div class = "child"> This is a child div. </div>
<div class = "child"> This is a child div. </div>
</div>
</body>
</html>
示例2
在下面的示例中，我们创建了卡片组件，然后在其中添加了图像。此外，我们还为卡片 div 指定了右边距为10px。在输出中，用户可以注意到右边有10px的空间。
<html>
<style>
.card {
width: 520px;
height: 100px;
background-color: grey;
padding-right: 10px;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "card">
<img src = "https://www.tutorialspoint.com/images/logo.png" alt = "">
</div>
</body>
</html>
使用Padding CSS属性
padding属性用于设置元素四个边的填充。我们可以为右边设置某个值，并将其他边设置为0。第一个值代表顶部，第二个值代表右边，第三个值代表底部，第四个值代表左边。所以，除了第二个值以外，我们将其他值都保持为0。
语法
用户可以按照以下语法使用padding CSS属性来指定元素的右填充。
padding: 0 value 0 0;
示例3
在下面的示例中，我们在container div中添加了一个带有一些文本的card div。此外，我们还为container div元素的右侧设置了‘5rem’的padding。用户可以观察到container div的右边框和其内容之间的5rem空间。
<html>
<style>
.container {
width: 10rem;
height: 10rem;
background-color: #f08a8a;
padding: 0 5rem 0 0;
}
</style>
<body>
<h3>Using the <i> padding CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "container">
<div class = "card">
<h3>This is a card inside the container div. The right padding is 2rem.</h3>
</div>
</div>
</body>
</html>
用户学会了为HTML元素指定正确的填充，他们可以使用“padding-right”或“padding”CSS属性。如果我们使用padding属性，我们只需要指定第二个值，并将其他值保持为0。