CSS | padding-block-start 属性

简介

padding-block-start 属性是 CSS 逻辑属性之一，用于设置元素与其内部内容之间的间距（内边距）。它设置元素内部顶部（水平方向上）与其内容之间的距离。

在水平文本方向下，padding-block-start 等效于 padding-top；在垂直文本方向下，它等效于 padding-inline-start。

语法

/* 规定所有边都具有相同边距 */
padding-block-start: length|initial|inherit;

/* 规定单独的边具有不同的边距 */
padding-block-start: length %|initial|inherit;

该属性的可能值包括：

• length：指定要设置的像素值、百分比或其他合法的长度单位的边距。负值是不合法的。若省略单位，默认使用 px。
• %：指定 padding-block-start 值为父元素 height 的一个百分比。例如，padding-block-start:30%; 可能是指的父元素高度的 30%。
• initial：设置 padding-block-start 属性为它的默认值 0。
• inherit：继承父元素的 padding-block-start 属性值。

示例

1. 将所有边的内边距都设置为 20px：

   div {
     padding-block-start: 20px;
   }
   

2. 将所有边的内边距都设置为父元素高度的 10%：

   div {
     padding-block-start: 10%;
   }
   

3. 为单独的边设置不同的内边距：

   div {
     padding-block-start: 20px;
     padding-block-end: 30px;
     padding-inline-start: 40px;
     padding-inline-end: 50px;
   }
   

   在这个例子中，会在元素内的顶部和底部设置 20px 和 30px 的内边距，水平左侧和右侧设置 40px 和 50px 的内边距。

浏览器兼容性

padding-block-start 属性目前并不受所有主流浏览器的支持，它的兼容性如下表所示：

| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | | :----: | :--: | :-----: | :---------------: | :---: | :----: | | 90 | 90 | 85 | 未支持 | 77 | 14 |

总结

padding-block-start 是一项非常有用的 CSS 计算属性，可以让前端开发人员准确地设置元素内部顶部（水平方向）与其内容之间的距离，使其在设计和布局过程中更加灵活。虽然目前它并不支持所有主流浏览器，但它已经被纳入 W3C 的标准规范，并与 HTML 标记文档深度整合。因此，对于支持该属性的开发人员来说，掌握这个属性还是非常重要的。