CSS - padding-block-end 属性

CSS 属性padding-block-end确定元素的逻辑块结束填充。它映射到物理填充，该填充取决于元素的书写模式、方向和文本方向。

可能的值

CSS 属性padding-block-end可以使用以下值之一指定

<length> − 将填充大小确定为固定值。不允许负值。
<percentage> − 将填充大小确定为百分比，相对于包含块的内联大小。不允许负值。

为属性指定的值将映射到padding-bottom、padding-left或padding-right属性，具体取决于元素的书写模式、方向和文本方向的值。

padding-block-end属性与padding-block-start、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-end = <'padding-top'>

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

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

CSS padding-block-end - 单长度值

以下示例演示了使用padding-block-end属性和单个长度值，该值确定元素的结束填充。

<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-end: 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>

CSS padding-block-end - 单百分比值

以下示例演示了使用padding-block-end属性和单个百分比值，该值确定元素的结束填充。

<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-end: 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>

CSS padding-block-end - 书写模式 vertical-rl

以下示例演示了使用padding-block-end属性、百分比值和书写模式为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-end: 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>

CSS padding-block-end - 方向 rtl

以下示例演示了使用padding-block-end属性、长度值和方向为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-end: 3.4em;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>

打印页面