CSS 属性

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>: 将填充的大小确定为固定值。不允许使用负值。

  • <percentagenotransR: 将填充的大小确定为百分比，相对于包含块的内联大小。不允许使用负值。

为属性指定的值对应于 padding-top 和 padding-bottom 或 padding-left 和 padding-right 属性基于元素的书写模式、方向和文本方向的值。

适用范围

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

语法

padding-block = <'padding-top'>{1,2}

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

/* <percentage> 值 */
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 测试</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 测试</span>
   </div>
</body>
</html>

CSS padding-block: 垂直书写模式

以下示例演示了 padding-block 的使用属性的长度值和写入模式为vertical-lr，它确定元素的开始和结束填充。第一个值决定左侧的填充，第二个值决定右侧的填充。

<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 测试</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: 30px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block 测试</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设置一行中文本字符的方向。