CSS 属性

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

属性值

CSS 属性 padding- inline-end 可以指定为以下值之一:

  • <length>: 将填充的大小确定为固定值。不允许使用负值。

  • <percentage>: 以百分比形式确定填充的大小，该大小相对于包含内联的内联大小。不允许使用负值。

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

它与其他填充 CSS 属性相关，例如 padding-block-start、padding-block-end 和 padding-inline-end。

适用范围

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

语法

padding-inline-end = <'padding-top'>

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

/* <percentage> 百分比值*/
padding-inline-end: 5%;

CSS padding-inline-end: 长度值

以下示例演示如何使用带有长度值的 padding-inline-end 属性，该属性确定元素的内联结束填充。

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

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

CSS padding-inline-end: 百分比值

以下示例演示如何使用带有百分比值的 padding-inline-end 属性，该属性确定元素的内联结束填充。

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

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

CSS padding-inline: 垂直书写模式

下面的示例演示如何使用 padding-inline-end 属性，其长度值和写入模式为vertical-lr，它决定元素的行内结束填充。

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

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