最稳妥做法是用无单位数值如line-height: 1.6；像素值易导致子元素继承异常，文字重叠或留白过大；无单位值以自身font-size动态计算，响应式友好且继承安全。
line-height 控制行间距最常用也最容易出错
直接写 line-height: 1.6 是最稳妥的做法，但很多人会误用像素值导致子元素继承异常。比如父级设 line-height: 20px，子元素字体变大后行高不会同比例放大，文字可能重叠或留白过大。
无单位数值（如 1.5）才是推荐方式：它以当前元素的 font-size 为基准动态计算，响应式友好，且子元素自动按自身字号重新计算。
- 正文段落用
line-height: 1.6～1.8 - 标题用更紧凑的
line-height: 1.1～1.3 - 避免
line-height: 1或更小值，易造成文字粘连 - 单行文本垂直居中？让父容器
height和line-height相等即可
letter-spacing 和 word-spacing 微调字词距离
letter-spacing 控制字母/汉字之间的间隙，word-spacing 调整单词间空格（对中文影响有限，但对英文、中英混排仍有作用）。
注意负值会压缩间距，但过度使用（如 letter-spacing: -0.05em）可能降低可读性；正值则常用于标题“呼吸感”设计。
- 标题微调：用
letter-spacing: 0.02em提升精致度 - 按钮文字太挤？试
letter-spacing: 0.04em - 英文段落松散？
word-spacing: 0.1em比默认更舒适 - 中文慎用
word-spacing，浏览器处理不一致，优先靠空格或
padding/margin 不是“间距”的万能解，但必须懂边界归属
段落之间看起来太紧？别急着给 p 加 padding——这会让元素自身尺寸变大，背景色或边框会撑开，还可能和相邻 margin 叠加出意外空白。
更合理的是用 margin：比如 mb-4（Tailwind）或 margin-bottom: 1rem，它只影响外部布局，不改变元素内容区域。
- 相邻块级元素间距 → 优先用
margin（上/下方向） - 文字与边框之间留白 → 用
padding（如按钮内边距px-4 py-2） - 行内元素（如
span）margin-top/bottom无效，只能靠line-height或包裹成块级 - 多个同类元素统一间距？Flex 容器配
gap比逐个设margin更干净
br 标签不是排版工具，滥用会导致维护灾难
看到地址、诗歌、简历信息换行就塞一堆 <br>？这是典型反模式。它把结构和样式耦合，一改字体大小或响应式断点，换行就全乱。
真正该做的是用 CSS 控制：地址用 div 包裹每行，再设 margin-bottom；诗歌用 pre 保留空格与换行；简历信息用语义化列表 ul + li。
- 绝对不要用
<br>制造段落间距，那是margin的职责 - 需要“视觉换行但语义不分段”？考虑
display: block+margin - 若真要用
<br>，至少加 class 如<br class="gap-sm">，再统一用 CSS 控制其上下 margin - 响应式场景下，
<br>在移动端可能多余，建议用媒体查询隐藏
文字间距问题表面是像素级调整，实际是布局思维的选择：什么时候该用流式属性（line-height），什么时候该用盒模型（padding/margin），什么时候该换语义结构（ul 替代 <br>）。细节藏在边界归属和继承逻辑里，而不是数值本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
