CSS - padding-inline-start 属性

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

可能的值

可以使用以下值之一指定 CSS 属性 padding-inline-start：

<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-start = <'padding-top'>

/* <length> 值 */
padding-inline-start: 10px;
padding-inline-start: 1em;	

/* <percentage> 值 */
padding-inline-start: 5%;

CSS padding-inline-start - 长度值

以下示例演示如何使用 padding-inline-start 属性与长度值一起使用，该属性确定元素的内联开始填充。


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

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

CSS padding-inline-start - 百分比值

下面的示例演示如何使用具有百分比值的 padding-inline-start 属性，该属性确定元素的内联开始填充。


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

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

CSS padding-inline - 垂直写作模式

以下示例演示如何使用 padding-inline-start 属性，该属性具有长度值和写入模式作为 vertical-lr，用于确定元素的内联开始填充。


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

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

本页