CSS - padding-inline 属性

CSS 属性padding-inline是一个简写属性，用于确定元素的逻辑内联开始和结束填充。它映射到物理填充属性，这些属性取决于元素的书写模式、方向和文本方向。

其组成 CSS 属性为padding-inline-start 和padding-inline-end。

可能的值

CSS 属性padding-inline可以使用一个或两个值来指定。当指定一个值时，它将用于padding-inline-start 和padding-inline-end。当指定两个值时，第一个值用于padding-inline-start，第二个值用于padding-inline-end。该属性接受以下值

<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-inline = <'padding-top'>{1,2}

/* <length> values */
padding-inline: 10px 20px;
padding-inline: 1em 2em; 
padding-inline: 10px;

/* <percentage> values */
padding-inline: 5% 2%;

CSS padding-inline - 长度值

以下示例演示了使用长度值padding-inline属性，它确定元素的内联开始和结束填充。第一个值确定顶部填充，第二个值确定底部填充。

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

   .padding-ex {
       margin: 10px;
      position: absolute;
      padding-inline: 15px 45px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 百分比值

以下示例演示了使用百分比值padding-inline属性，它确定元素的内联开始和结束填充。第一个值确定顶部填充，第二个值确定底部填充。

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

   .padding-ex {
       margin: 10px;
      position: absolute;
      padding-inline: 15% 55%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 混合值

以下示例演示了使用混合值（长度和百分比）padding-inline属性，它确定元素的开始和结束填充。第一个值确定左侧填充，第二个值确定右侧填充。

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

   .padding-ex {
      margin: 10px;
      position: absolute;
      padding-inline: 30px 30%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 书写模式垂直

以下示例演示了使用长度值和书写模式为vertical-lrpadding-inline属性，它确定元素的内联开始和结束填充。第一个值确定顶部填充，第二个值确定元素底部填充。

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

   .padding-ex {
      margin: 10px;
      writing-mode: vertical-lr;
      padding-inline: 50px 10px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 单个值

以下示例演示了使用单个长度/百分比值padding-inline属性，它确定元素的内联开始和结束填充。

将“padding-inline”的值更改为百分比，然后查看差异。

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

   .padding-ex {
      margin: 1.5em;
      writing-mode: horizontal-tb;
      position: absolute;
      padding-inline: 30px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - 相关属性

下表列出了 CSS padding-inline的所有相关属性

属性	描述
padding-bottom	设置元素底部填充区域的高度。
padding-left	设置元素左侧填充区域的宽度。
padding-right	设置元素右侧填充区域的宽度。
padding-top	设置元素顶部填充区域的高度。
padding-inline-start	定义元素的逻辑内联开始填充。
padding-inline-end	定义元素的逻辑内联结束填充。
writing-mode	设置文本行是水平显示还是垂直显示。
direction	设置文本方向，可以是从左到右或从右到左。
text-orientation	设置一行中文本字符的方向。

打印页面