padding-block是按writing-mode动态映射块方向内边距的逻辑属性，非简单替代padding-top/bottom；其start/end端映射取决于书写模式，如horizontal-tb下对应上下，vertical-rl下对应左右，未设writing-mode时行为等同物理属性但语义不同。
padding-block 不是“替代 padding-top/padding-bottom 的新写法”，它是按书写模式（writing-mode）动态映射块方向内边距的逻辑属性——用错场景或忽略 writing-mode，它就完全不生效。
padding-block 在 vertical-rl 或 horizontal-tb 下怎么映射
它的起始（start）和结束（end）不是固定指“上”和“下”，而是由 writing-mode 决定：
- 默认
writing-mode: horizontal-tb（英文/中文横排）→padding-block-start=padding-top，padding-block-end=padding-bottom -
writing-mode: vertical-rl（竖排右到左，如传统中文竖排）→padding-block-start=padding-right，padding-block-end=padding-left -
writing-mode: vertical-lr（竖排左到右）→padding-block-start=padding-left，padding-block-end=padding-right
所以别只看 CSS 规则本身，先确认父容器或自身是否设置了 writing-mode。没设？那它就等价于 padding-top/padding-bottom，但一旦设了，映射关系立刻翻转。
padding-block: 10px 20px 和 padding-block: 10px 的行为差异
这是简写语法，和 padding 类似，但只管块方向两头：
立即学习“前端免费学习笔记（深入）”；
-
padding-block: 10px→padding-block-start: 10px+padding-block-end: 10px -
padding-block: 10px 20px→padding-block-start: 10px+padding-block-end: 20px -
padding-block: 5px 15px 25px❌ 无效：它不接受三值或四值，只支持一值或两值
注意：padding-block 永远不会影响行内方向（left/right 或 top/bottom 的另一对），想控制那一侧得用 padding-inline。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
inline 元素用 padding-block 会怎样
可以设，但效果受限：
- 对纯
display: inline元素（如span、a），padding-block会作用在行框（line box）上，可能撑高行高，但不会改变元素本身的“占位宽度” - 如果该 inline 元素内部有换行或
font-size变化，padding-block的视觉表现会变得不稳定 - 更稳妥的做法：加
display: inline-block，此时padding-block表现和 block 元素一致，且可预测
别指望靠 padding-block 让一个 span 在垂直方向“居中对齐”父容器——它只是内边距，不是布局工具。
兼容性与 fallback 方案怎么写
Chrome 87+、Firefox 66+、Safari 14.1+ 支持，但 IE 完全不支持，旧版 Safari（≤14）需前缀 -webkit-padding-block：
button {
padding-top: 8px;
padding-bottom: 8px;
padding-block: 8px; /* 覆盖上面两行 */
}更安全的写法是「先写逻辑属性，再写物理属性」并用 @supports 包裹：
@supports (padding-block: 1px) {
.card { padding-block: 12px; }
}
@supports not (padding-block: 1px) {
.card { padding-top: 12px; padding-bottom: 12px; }
}真正容易被忽略的点是：当你在多语言项目里混用 writing-mode，padding-block 的值可能在不同区域产生相反方向的效果——这时不能只靠一套数值，得结合 dir 属性或 class 控制上下文。
