CSS 属性

CSS 属性 padding-inline 是一个简写属性，它确定元素的逻辑内联开始和结束填充。它映射到取决于writing-mode、direction和 text-orientation 的物理填充属性。

其组成 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-colum-group 和 table-column。

语法

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

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

/* <percentage> 百分比 */
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 长度值</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 百分比值</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 混合值（长度和百分比）</span>
   </div>
</body>
</html>

CSS padding-inline: 垂直书写模式

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

<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 垂直书写模式</span>
   </div>
</body>
</html>

CSS padding-inline: 单个值

以下示例演示了填充的使用-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 单个值</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设置一行中文本字符的方向。