HTML怎么做CSS padding-block_html CSS padding-block逻辑属性【详解】-html教程-PHP中文网

padding-block是按writing-mode动态映射块方向内边距的逻辑属性，非简单替代padding-top/bottom；其start/end端映射取决于书写模式，如horizontal-tb下对应上下，vertical-rl下对应左右，未设writing-mode时行为等同物理属性但语义不同。

html怎么做css padding-block_html css padding-block逻辑属性【详解】

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。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 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 控制上下文。