CSS - padding-block-start 屬性

CSS 屬性padding-block-start 確定元素的邏輯塊起始填充。它對映到物理填充，該填充取決於元素的書寫模式、方向和文字方向。

可能的值

CSS 屬性padding-block-start 可以使用以下值之一指定

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

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

padding-block-start 屬性與padding-block-end、padding-inline-start 和padding-inline-end 屬性相關，這些屬性負責定義元素的其他填充。

應用於

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

語法

padding-block-start = <'padding-top'>

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

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

CSS padding-block-start - 單個長度值

以下示例演示了使用padding-block-start 屬性和單個長度值，該值確定元素的起始填充。

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

   .padding-ex {
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

CSS padding-block-start - 單個百分比值

以下示例演示了使用padding-block-start 屬性和單個百分比值，該值確定元素的起始填充。

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

   .padding-ex {
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 15%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

CSS padding-block-start - 書寫模式 vertical-rl

以下示例演示了使用padding-block-start 屬性和百分比值以及書寫模式為vertical-rl，該值確定元素的起始填充。

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

   .padding-ex {
      writing-mode: vertical-rl;
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 20%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

CSS padding-block-start - 方向 rtl

以下示例演示了使用padding-block-start 屬性和長度值以及方向為rtl（從右到左），該值確定元素的起始填充。

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

   .padding-ex {
      direction: rtl;
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 3.4em;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

列印頁面