CSS - padding-inline 屬性

CSS 屬性padding-inline是一個簡寫屬性，用於確定元素的邏輯內聯開始和結束填充。它對映到物理填充屬性，這些屬性取決於元素的書寫模式、方向和文字方向。

其組成 CSS 屬性為padding-inline-start 和padding-inline-end。

可能的值

CSS 屬性padding-inline可以使用一個或兩個值來指定。當指定一個值時，它將用於padding-inline-start 和padding-inline-end。當指定兩個值時，第一個值用於padding-inline-start，第二個值用於padding-inline-end。該屬性接受以下值

<length> − 將填充大小確定為固定值。不允許使用負值。
<percentage> − 將填充大小確定為百分比，相對於包含內聯的內聯大小。不允許使用負值。

根據元素的書寫模式、方向和文字方向的值，為該屬性指定的值對應於padding-top 和padding-bottom 或padding-left 和padding-right 屬性。

應用於

所有 HTML 元素，除了table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和table-column。

語法

padding-inline = <'padding-top'>{1,2}

/* <length> values */
padding-inline: 10px 20px;
padding-inline: 1em 2em; 
padding-inline: 10px;

/* <percentage> values */
padding-inline: 5% 2%;

CSS padding-inline - 長度值

以下示例演示了使用長度值padding-inline屬性，它確定元素的內聯開始和結束填充。第一個值確定頂部填充，第二個值確定底部填充。

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
       margin: 10px;
      position: absolute;
      padding-inline: 15px 45px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 百分比值

以下示例演示了使用百分比值padding-inline屬性，它確定元素的內聯開始和結束填充。第一個值確定頂部填充，第二個值確定底部填充。

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
       margin: 10px;
      position: absolute;
      padding-inline: 15% 55%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 混合值

以下示例演示了使用混合值（長度和百分比）padding-inline屬性，它確定元素的開始和結束填充。第一個值確定左側填充，第二個值確定右側填充。

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
      margin: 10px;
      position: absolute;
      padding-inline: 30px 30%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 書寫模式垂直

以下示例演示了使用長度值和書寫模式為vertical-lrpadding-inline屬性，它確定元素的內聯開始和結束填充。第一個值確定頂部填充，第二個值確定元素底部填充。

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
   }

   .padding-ex {
      margin: 10px;
      writing-mode: vertical-lr;
      padding-inline: 50px 10px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 單個值

以下示例演示了使用單個長度/百分比值padding-inline屬性，它確定元素的內聯開始和結束填充。

將“padding-inline”的值更改為百分比，然後檢視差異。

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
      margin: 1.5em;
      writing-mode: horizontal-tb;
      position: absolute;
      padding-inline: 30px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 相關屬性

下表列出了 CSS padding-inline的所有相關屬性

屬性	描述
padding-bottom	設定元素底部填充區域的高度。
padding-left	設定元素左側填充區域的寬度。
padding-right	設定元素右側填充區域的寬度。
padding-top	設定元素頂部填充區域的高度。
padding-inline-start	定義元素的邏輯內聯開始填充。
padding-inline-end	定義元素的邏輯內聯結束填充。
writing-mode	設定文字行是水平顯示還是垂直顯示。
direction	設定文字方向，可以是從左到右或從右到左。
text-orientation	設定一行中文字字元的方向。

列印頁面