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	设置一行中文本字符的方向。

打印页面

上一个

下一个