CSS 属性

CSS 属性 padding-block-start 确定元素的逻辑块起始填充。它映射到取决于writing-mode、direction 和元素的text-orientation。

属性值

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> */
padding-block-start: 10px;
padding-block-start: 1em; 

/* <percentage> */
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属性，它确定元素的起始填充。

<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: 方向

以下示例演示了带有长度值的 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>