CSS 中哪一個屬性指定元素的右邊填充？-css教學-PHP中文網

首頁

web前端

css教學

CSS 中哪一個屬性指定元素的右邊填充？

PHPz

Sep 12, 2023 pm 07:13 PM

CSS 中哪个属性指定元素的右填充？

在 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 id="Using-the-i-padding-right-CSS-property-i-to-add-the-padding-at-right-in-the-HTML-element">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 id="Using-the-i-padding-right-CSS-property-i-to-add-the-padding-at-right-in-the-HTML-element">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 id="Using-the-i-padding-CSS-property-i-to-add-the-padding-at-right-in-the-HTML-element">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 id="This-is-a-card-inside-the-container-div-The-right-padding-is-rem">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。

以上是CSS 中哪一個屬性指定元素的右邊填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除