17370845950

line-height是CSS属性，非HTML5原生属性；其推荐值为无单位数字（如1.5），可继承且不二次缩放；length（如20px）和percentage（如150%）易导致嵌套异常或视觉拥挤。

HTML5 本身没有 line-height 属性——它是 CSS 的属性，但常被误认为属于 HTML 标签。直接在 HTML 元素上用 style 设置或通过外部 CSS 控制，才是正确路径。

line-height 可接受的值类型有哪些

值类型直接影响继承行为和响应式表现，选错会导致子元素行高意外放大或塌陷：

• number（无单位数字，如 1.5）：最推荐。相对于当前字体大小计算，可继承且不随父级 font-size 改变而“二次缩放”
• length（带单位，如 24px 或 1.2em）：px 值不可继承（子元素用默认行高），em 会叠加父级字号，容易失控
• percentage（百分比，如 150%）：按父元素的 font-size 计算，但会继承计算后的绝对值，行为接近 length

在内联样式中设置 line-height 的常见错误

很多人写

，结果多段文字混排时行高不一致，尤其遇到 small 或 sup 这类改变字号的内联元素：

 

  正常文字 小号文字 后续文字

这时 内容的行高仍为 20px，但字体变小后视觉上显得“挤”。应改用无单位数值：

 

  正常文字 小号文字 后续文字

line-height 与 font-size 的典型搭配参考

视觉舒适度取决于字号与行高的比例，不是固定公式，但有经验区间：

• font-size: 14px → line-height: 1.4 ~ 1.6（约 19–22px）
• font-size: 16px → line-height: 1.5 ~ 1.7（约 24–27px）
• font-size: 18px → line-height: 1.4 ~ 1.6（大字号反而略降低倍率更易读）
• 中文排版建议最小行高不低于 1.3，否则字形易粘连

使用 rem 或 em 设置 line-height 的陷阱

用 line-height: 1.5em 看似灵活，实则危险——它会基于当前元素的 font-size 计算，而该值可能来自继承或重置，导致嵌套时逐层放大：

 
  
第一层
  
    
第二层：实际 line-height = 12px × 1.5 = 18px
  

这种“相对再相对”的行为难以预测。若需响应式缩放，请统一用无单位数值（如 1.5），它始终相对于自身的 font-size，不会跨层级污染。

真正难处理的是混合中英文、图标字体、垂直对齐的场景——这时候 line-height 往往要配合 vertical-align 和 padding 调整，单靠一个属性很难一劳永逸。