CSS - padding-inline-end 屬性

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

可能的值

CSS 屬性 `padding-inline-end` 可以使用以下值之一指定：

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

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

它與其他 CSS 內邊距屬性相關，例如 `padding-block-start`、`padding-block-end` 和 `padding-inline-end`。

應用於

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

語法

padding-inline-end = <'padding-top'>

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

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

CSS padding-inline-end - 長度值

以下示例演示了使用長度值的 `padding-inline-end` 屬性，它確定元素的內聯結束填充。

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

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

CSS padding-inline-end - 百分比值

以下示例演示了使用百分比值的 `padding-inline-end` 屬性，它確定元素的內聯結束填充。

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

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

CSS padding-inline - 垂直書寫模式

以下示例演示了使用長度值和 `vertical-lr` 書寫模式的 `padding-inline-end` 屬性，它確定元素的內聯結束填充。

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

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

列印頁面