CSS行高详解：影响因素与行内框理解

深入理解CSS line-height属性 CSS line-height 是一个重要的样式属性，用于控制文本行的垂直间距，也就是基线（Baseline）之间的距离。基线是文字排列的基础，对于不同语言的字符（如英文字母和汉字）有所不同，但对于英文，基线通常指的是字母x的底部。除了行高，字号（font-size）也会影响文本之间的空白，即行距（leading），两者共同决定了文本在页面上的视觉效果。 7.3.1 语法和定义 line-height 属性接受多种值来设置行高：正常值（normal，默认为1到1.2倍字号）、实数值（缩放因子）、长度单位（如像素或em）、百分比值，以及继承（inherit）。百分比值根据元素的字体尺寸计算。初始值是normal，属性继承性良好，适用于所有元素，视觉媒体下计算长度和百分比值为绝对值，其他值则保持指定值不变。 7.3.2 内容区域、行内框和行框 对于行内元素，有一个由字体尺寸决定的内容区域。行内框（inlinebox）是理论上的概念，虽然不可见，但存在，并且行高会影响其高度。当设定行高时，会增加或减少行内框高度，通过将行距（行高减去字体尺寸）除以2，分配到内容区域的上下两侧。 然而，line-height 可以应用于任何元素，这就可能导致同一行内的不同元素具有不同的行高和行内框高度。比如，一个段落内的`<p>`标签设置了20px的行高，`<strong>`标签设置了50px的行高，`<span>`标签则为30px。这会产生多个不同高度的行框，其中行框高度取本行内所有元素最大行高的值。 理解CSS line-height属性的关键在于掌握它的语法、影响因素（字号和行距）、如何作用于行内元素的行内框和行框，以及在多元素情况下可能产生的复杂布局。掌握这些，可以帮助设计师更好地控制文本的视觉呈现，实现美观且易读的排版效果。