CSS - padding-block 屬性

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

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

可能的值

CSS 屬性padding-block可以使用一個或兩個值指定。當指定一個值時，它將用於padding-block-start和padding-block-end。當指定兩個值時，第一個值用於padding-block-start，第二個值用於padding-block-end。該屬性採用與padding-left CSS 屬性相同的值，如下所示

<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-block = <'padding-top'>{1,2}

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

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

CSS padding-block - 長度值

以下示例演示了使用長度值padding-block屬性，它確定元素的起始和結束內邊距。第一個值確定頂部內邊距，第二個值確定底部內邊距。

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

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

CSS padding-block - 百分比值

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

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

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

CSS padding-block - 混合值

以下示例演示了使用混合值（長度和百分比）padding-block屬性，它確定元素的起始和結束內邊距。第一個值確定頂部內邊距，第二個值確定底部內邊距。

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

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

CSS padding-block - 書寫模式垂直

以下示例演示了使用長度值和書寫模式為vertical-lr的padding-block屬性，它確定元素的起始和結束內邊距。第一個值確定左側內邊距，第二個值確定右側內邊距。

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

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

CSS padding-block - 單個值

以下示例演示了使用單個長度/百分比值padding-block屬性，它確定元素的起始和結束內邊距。

將“padding-block”的值更改為百分比，檢視區別。

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

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

CSS padding-block - 相關屬性

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

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

列印頁面

上一個

下一個