文字排版问题源于语义、默认行为与css继承链冲突；需用em/rem替代px实现自适应，避免margin合并、text-indent错位及word-break滥用，确保多语言多设备一致性。
文字排版细节问题不是“加个样式就能好”，而是语义、默认行为、CSS继承链三者打架的结果；直接改 line-height 或 margin 常常只压住一个症状，却引爆另一个。
为什么改了 margin 段落还是粘连？
浏览器给 p 的默认上下外边距会和相邻元素发生外边距合并（margin collapse），尤其在父容器没边框/内边距时，首段顶空、末段底空、中间段距不均全是它导致的。
- 必须同时设置
margin-top和margin-bottom，例如p { margin: 1em 0; }，不能只设margin-top - 首段去顶空：
.content p:first-child { margin-top: 0; } - 末段去底空：
.content p:last-child { margin-bottom: 0; } - 别用
px——em或rem才能随字体缩放自适应，比如系统开启“大字体模式”时仍保持比例
text-indent 缩进失效或错位？
中文首行缩进写成 text-indent: 32px 是最常见错误：像素值在高 DPI 屏、缩放 125%、或用户修改系统字体大小时，缩进会严重失准。
- 正确写法是
text-indent: 2em——它始终等于当前字号下两个汉字宽度 - 如果用了
text-align: justify，text-indent会被覆盖，两者慎合用 - 绝对不要用空格、
<br>
模拟缩进：破坏语义、不可选、屏幕阅读器误读、响应式失效 -
text-indent只影响首行，安全；别用padding-left替代，它会让整段左移，破坏对齐基准
按钮/输入框文字挤在一起或撑开？
按钮类替换元素（button、input[type="button"]）对 letter-spacing 和 line-height 极其敏感，且默认行为依赖字体度量，换字体后极易错位。
- 先重置继承污染：
button { letter-spacing: normal; line-height: 1.2; } -
line-height: normal不可靠——它随字体变化，显式写无单位数值才稳 - 垂直居中优先靠
padding控制（如padding: 6px 12px），比单靠line-height更可控 - 移动端慎用负
letter-spacing：iOS Safari 对小字号（≤12px）+ 负值渲染不稳定，可能发虚或抖动
超长英文/URL 不折行、表格被撑开？
根本原因是 white-space 和 word-break 配置错位。浏览器不会自动在长单词中间断行，除非你明确告诉它怎么断。
- 普通段落含用户回车：用
white-space: pre-wrap——保留换行符，又允许右边界自动折行 - 表格单元格不折行：检查是否被框架加了
white-space: nowrap，修复只需td { white-space: normal; overflow-wrap: break-word; } - 单行截断显示
…必须三者齐全：width/max-width（有界）、white-space: nowrap（强制不换）、overflow: hidden（隐藏溢出） - 避免
word-break: break-all：它会在任意字符间切断，中文可能断在字中间，体验差
真正难处理的不是某一行 CSS，而是当 lang 缺失、writing-mode 和 direction 冲突、或 font-family fallback 度量不一致时，同一段样式在不同语言/设备上表现完全不同——这些点一旦漏掉，调试成本远高于写新样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
