padding-block是css逻辑属性，用于按块轴（内容流方向）设置内边距，不依赖物理方向；在horizontal-tb模式下对应padding-top/bottom，但在vertical-rl等模式下自动适配为左右方向，语义更强、更适应国际化与多布局场景。
padding-block 是什么，和 padding-top / padding-bottom 有什么区别？
padding-block 是 CSS 逻辑属性，用于在块轴（block axis）方向设置内边距——也就是文档流中“垂直方向”的内边距。它不依赖于书写模式（writing mode），而是根据当前 writing-mode 和 direction 自动映射到物理方向：
在默认水平书写模式（writing-mode: horizontal-tb）下，padding-block-start 对应 padding-top，padding-block-end 对应 padding-bottom；但在竖排（vertical-rl）时，它会自动变成左右方向。
这意味着：
– 用 padding-top / padding-bottom 是硬编码物理方向，换书写模式就得改代码；
– 用 padding-block 是声明“我要在内容流的起始/结束侧留白”，更语义、更可维护。
如何正确使用 padding-block 设置上下内边距？
最常用的是两个子属性：padding-block-start 和 padding-block-end。它们支持所有标准单位（px、rem、% 等），也支持 auto（但实际效果受限，一般不用）。
- 单独控制顶部（块起始）：
padding-block-start: 12px; - 单独控制底部（块结束）：
padding-block-end: 8px; - 同时设置两端（简写）：
padding-block: 12px 8px;（顺序是 start end） - 两端相同：
padding-block: 16px;（等价于padding-block-start: 16px; padding-block-end: 16px;）
注意：padding-block 不能和 padding-top/padding-bottom 混用在同一元素上——后者会被前者覆盖（如果同优先级），CSS 会按声明顺序应用，但逻辑属性优先级更高。
为什么在 flex 或 grid 容器里用 padding-block 更安全？
当元素处于 display: flex 或 display: grid 中，且容器设置了 flex-direction: column 或 grid-template-rows 时，“上下”概念可能被重新定义。此时若仍用 padding-top，在某些 RTL 或竖排场景下会错位；而 padding-block-start 始终指向内容流的起始端，与布局方向一致。
常见踩坑点：
– 在 flex-direction: column-reverse 下，padding-block-start 会落在视觉底部（因为起始端已翻转），这是预期行为，不是 bug；
– 如果你希望“始终在视觉顶部加内边距”，那说明你其实需要物理属性，不该用逻辑属性；
– Safari 15.4+ 才完整支持 padding-block 简写，旧版需用独立属性或加前缀（但现代项目通常已不考虑）。
padding-block 和 box-sizing 的关系不能忽略
padding-block 增加的依然是内边距，所以它同样受 box-sizing 控制：
– 默认 box-sizing: content-box：padding-block 会让元素总高度变大；
– 设为 box-sizing: border-box：padding-block 会压缩内容区高度，总高度不变。
建议始终在重置样式中启用：* { box-sizing: border-box; }
否则在响应式卡片、表单控件等固定高度场景下，padding-block: 1rem 可能导致内容溢出或布局错位，尤其配合 max-height 或 flex: 0 0 auto 使用时。
逻辑属性不是银弹——它让语义更清晰，但也要求你真正理解内容流的方向。写 padding-block-start 之前，先确认你的 writing-mode 和父容器的布局方向是否如你所想。否则，一个看似优雅的改动，可能在某个 locale 下让整个表单错位两行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
