Skip to content

对 line-height 的理解及其赋值方式

概念

line-height 指一行文本的高度,包含了字间距,实际上是下一行基线到上一行基线的距离

line-height 和 height 都能撑开元素高度 (如果 line-height 和 height 一致时可以实现单行文字的垂直居中)

计算方式

带单位的px

line-height 为 固定值

纯数字

直接 line-height 会把比例传递给后代

例如,父级行高为 1.5,子元素字体为 18px,则子元素行高为 1.5 * 18 = 27px

百分比

父元素将计算后的值传递给后代

例如,父元素行高为 200%,父元素字体为 18px,那么子元素行高为 18 * 200% = 36px