◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
CSS 中哪个属性指定元素的右填充？
ID:13620 / 打印
在 CSS 中，padding 属性允许我们在 HTML 元素的边框与其内容之间添加额外的空间。右内边距意味着仅在元素内容和右边框之间添加空格。
在这里，我们将学习两个不同的属性来指定元素的右填充。
使用 padding-right CSS 属性
‘padding-right’属性指定 CSS 中元素的右填充。每当我们为元素指定右内边距时，该元素的宽度就等于实际宽度 + 右内边距。
语法
用户可以按照下面的语法来指定元素的右填充。
立即学习“前端免费学习笔记（深入）”；
padding-right: 100px;
示例 1
在下面的示例中，父 div 包含多个子 div。使用“padding-right”CSS 属性，我们为父 div 指定了“300px”的右填充。此外，我们还为所有子 div 元素指定了 100px 的 padding-right。
在输出中，用户可以观察到右边框和子 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> 使用 CSS 填充属性
padding 属性用于设置元素所有四个边的填充。我们可以将右侧填充设置为某个值，并将其他边设置为 0。第一个值代表顶部，第二个值代表右侧，第三个值代表底部，第四个值代表左侧。因此，除了第二个值之外，我们将保留 0 作为值。
语法
用户可以按照以下语法使用 padding CSS 属性来指定元素的右填充。
padding: 0 value 0 0;
示例 3
在下面的示例中，我们添加了一个卡片 div，并在容器 div 内添加了一些文本。另外，我们在容器 div 元素的右侧给出了“5rem”的填充。用户可以观察容器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。
