HTML中段落间距由CSS的margin控制，浏览器为p元素默认设margin:1em 0；line-height仅调节段内行距，不改变段间距；需重置margin或触发BFC以精确控制外边距合并。
HTML 本身不负责排版计算，真正决定文字如何显示的是 CSS 渲染引擎。所谓“用 HTML 分析排版原理”，其实是通过观察 HTML 结构与对应 CSS 属性的协同作用，反推浏览器如何解析、布局、绘制文本。
为什么 <p> 会产生段间距
浏览器对 <p> 元素有默认的用户代理样式（user agent stylesheet），其中关键的一条是：margin: 1em 0;。这个上下外边距不是 HTML 规范定义的，而是浏览器实现的视觉约定。
- 不同浏览器 margin 值略有差异（Chrome/Firefox 多为
1em，Safari 可能略小） - 该 margin 是块级盒模型的一部分，会参与外边距折叠（margin collapsing）
- 若想彻底消除段间距，需显式重置：
p { margin: 0; }，而非删掉<p>标签
writing-mode 如何改变文字流方向
writing-mode 不是“旋转文字”，而是切换整个文本流的坐标系：它重新定义了内联轴（inline axis）和块轴（block axis）的方向。例如 writing-mode: vertical-rl 会让：
- 内联轴变为垂直向下（字符从上到下排列）
- 块轴变为水平向右（新行从右往左推进）
-
line-height依然控制“行”间距，但此时的“行”是竖着的一列字符 -
text-align的行为也相应变化：text-align: right会把文字贴在容器右侧（即物理上的“顶部”）
letter-spacing 和 line-height 的单位选择陷阱
这两个属性看似简单，但单位误用会导致响应式失效或缩放异常：
立即学习“前端免费学习笔记（深入）”；
-
letter-spacing: 2px在字体放大时不会等比扩大，可能让大屏下文字显得过疏 -
line-height: 24px是固定值，若父元素font-size动态变化（如 rem 布局），行高将不再匹配字体大小 - 推荐用无单位值：
line-height: 1.6或相对单位：letter-spacing: 0.05em - 注意：
letter-spacing会影响所有子元素，嵌套<span>时容易意外继承
混合中英文竖排时 text-orientation 的实际表现
默认 text-orientation: mixed 下，中文字符竖排，拉丁字母仍保持横向（逐字旋转90°），这符合传统古籍习惯；但若设为 upright，所有字符强制直立——这时英文单词会变成“H T M L”式堆叠，可读性骤降。
-
upright对数字、标点同样生效，可能导致“2026”显示为四行单数字 - 目前 Safari 对
text-orientation: upright支持不稳定，部分版本会忽略该声明 - 真要实现全字符直立竖排，往往得配合
transform: rotate(90deg)+white-space: nowrap手动控制，但会丢失文本可选性和语义
最易被忽略的一点：writing-mode 改变的不只是视觉方向，它还影响 flex 容器的主轴、grid 的行/列定义、甚至 scroll-snap-align 的对齐基准——排版逻辑一旦切换，整个布局体系都要重新校准。
