在 CSS 中，padding 屬性允許我們?cè)?HTML 元素的邊框與其內(nèi)容之間添加額外的空間。右內(nèi)邊距意味著僅在元素內(nèi)容和右邊框之間添加空格。
在這里，我們將學(xué)習(xí)兩個(gè)不同的屬性來指定元素的右填充。
使用 padding-right CSS 屬性
‘padding-right’屬性指定 CSS 中元素的右填充。每當(dāng)我們?yōu)樵刂付ㄓ覂?nèi)邊距時(shí)，該元素的寬度就等于實(shí)際寬度 + 右內(nèi)邊距。
語法
用戶可以按照下面的語法來指定元素的右填充。
padding-right: 100px;
登錄后復(fù)制
示例 1
在下面的示例中，父 div 包含多個(gè)子 div。使用“padding-right”CSS 屬性，我們?yōu)楦?div 指定了“300px”的右填充。此外，我們還為所有子 div 元素指定了 100px 的 padding-right。
在輸出中，用戶可以觀察到右邊框和子 div 之間有 300px 的空間。另外，右邊框和文本內(nèi)容之間有 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>
登錄后復(fù)制
示例 2
在下面的示例中，我們創(chuàng)建了卡片組件并在其中添加了圖像。此外，我們還為卡片 div 指定了 10px 的右內(nèi)邊距。在輸出中，用戶可以觀察到右側(cè) 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>
登錄后復(fù)制
使用 CSS 填充屬性
padding 屬性用于設(shè)置元素所有四個(gè)邊的填充。我們可以將右側(cè)填充設(shè)置為某個(gè)值，并將其他邊設(shè)置為 0。第一個(gè)值代表頂部，第二個(gè)值代表右側(cè)，第三個(gè)值代表底部，第四個(gè)值代表左側(cè)。因此，除了第二個(gè)值之外，我們將保留 0 作為值。
語法
用戶可以按照以下語法使用 padding CSS 屬性來指定元素的右填充。
padding: 0 value 0 0;
登錄后復(fù)制
示例 3
在下面的示例中，我們添加了一個(gè)卡片 div，并在容器 div 內(nèi)添加了一些文本。另外，我們?cè)谌萜?div 元素的右側(cè)給出了“5rem”的填充。用戶可以觀察容器div的右邊框與其內(nèi)容之間的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>
登錄后復(fù)制
用戶學(xué)會(huì)了為 HTML 元素指定正確的填充，并且他們可以使用“padding-right”或“padding”CSS 屬性。如果我們使用 padding 屬性，我們只需指定第二個(gè)值，并將其他值保留為 0。
以上就是CSS 中哪個(gè)屬性指定元素的右填充？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
