CSS 属性 padding-block-start 确定元素的逻辑块开始填充。它映射到物理填充,具体取决于元素的书写模式、方向和文本方向。
可能的值
可以使用以下值之一指定 CSS 属性 padding-block-start:
- <length> - 将填充的大小确定为固定值。不允许使用负值。
- <percentage> - 以百分比形式确定填充的大小,即相对于包含块的内联大小。不允许使用负值。
为属性指定的值根据元素的书写模式、方向和文本方向的值映射到 padding-bottom、padding-left 或 padding-right 属性。
padding-block-start 属性与 padding-block-end、padding-inline-start 和 padding-inline-end 属性相关,它们负责定义元素的其他填充。
适用于
所有 HTML 元素,不包括 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column。
语法
padding-block-start = <'padding-top'>
/* <length> values */
padding-block-start: 10px;
padding-block-start: 1em;
/* <percentage> values */
padding-block-start: 5%;
CSS padding-block-start - 单个长度值
以下示例演示如何使用具有单个长度值的 padding-block-start 属性,该属性确定元素的开始填充。
<html>
<head>
<style>
div {
background-color: green;
width: 250px;
height: 180px;
position: relative;
}
.padding-ex {
margin-top: 1em;
margin-left: 1em;
position: absolute;
padding-block-start: 15px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="padding-ex">padding-block-start</span>
</div>
</body>
</html>
CSS padding-block-start - 单一百分比值
下面的示例演示如何使用具有单个百分比值的 padding-block-start 属性,该属性确定元素的开始填充。
<html>
<head>
<style>
div {
background-color: green;
width: 250px;
height: 180px;
position: relative;
}
.padding-ex {
margin-top: 1em;
margin-left: 1em;
position: absolute;
padding-block-start: 15%;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="padding-ex">padding-block-start</span>
</div>
</body>
</html>
CSS padding-block-start - 写作模式 vertical-rl
以下示例演示了如何使用 padding-block-start 属性,该属性具有百分比值和写入模式作为 vertical-rl,用于确定元素的开始填充。
<html>
<head>
<style>
div {
background-color: green;
width: 250px;
height: 180px;
}
.padding-ex {
writing-mode: vertical-rl;
margin-top: 1em;
margin-left: 1em;
position: absolute;
padding-block-start: 20%;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="padding-ex">padding-block-start</span>
</div>
</body>
</html>
CSS padding-block-start - 方向 rtl
以下示例演示了如何使用 padding-block-start 属性,其长度值和方向为 rtl(从右到左),用于确定元素的开始填充。
<html>
<head>
<style>
div {
background-color: green;
width: 250px;
height: 180px;
}
.padding-ex {
direction: rtl;
margin-top: 1em;
margin-left: 1em;
position: absolute;
padding-block-start: 3.4em;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="padding-ex">padding-block-start</span>
</div>
</body>
</html>