CSS - padding-inline 属性_CSS 菜鸟教程

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> 值 */
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 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 - 垂直写作模式

以下示例演示如何使用 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 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	设置行中文本字符的方向。

<< CSS - padding-block-start 属性 CSS - padding-inline-end 属性 >>