CSS line-height的理解

真正的能理解CSS中的line-height，height与line-height

line-height是基线到基线的距离，当我们不设置行高的时候，可以看到line-height默认值是normal，看下面的例子，line-height等于内容的高度：

.title {
    background-color: orange;
    font-size: 80px;
    word-break: break-all;    
}

为啥内容的高度不等于font-size呢？这个其实是由浏览器的实现决定的。

设置line-height为150px：

.title {
    background-color: orange;
    font-size: 80px;
    line-height: 150px;
    word-break: break-all;
    border: solid darkgreen 5px;
}

加上padding，会影响内容高度但不会影响布局:

.title {
    background-color: orange;
    font-size: 80px;
    line-height: 150px;
    word-break: break-all;
    border: solid darkgreen 5px;
    padding: 5px;
}

重新认识font-size、line-height和行高

Inline elements and line-height

div的高度由内部的line boxes中的inline boxes的line-height决定的:

到底这个line-height行高怎么就产生了高度呢？在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字，如果它们在一行显示，你艾佛森再牛逼，对不起，只有一个line boxes罩着你；但“春哥纯爷们”这5个字，要是竖着写，一行一个，那真是够爷们，一个字罩着一个line boxes，于是总计五个line boxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下 – inline boxes干的，这些手下就是文字啦，图片啊，之类的inline属性的标签啦。line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。例如，取手下line-height最高的值。则line boxes的高度就是40像素了。
css行高line-height的一些深入理解及应用

div内部的line box由一个无法看到的strut支杆开头，这个strut的高度就是block的line-height：

Block layouts, like div is by default, are made up of a vertical stack of line boxes, which never have space between them and never overlap. Each line box starts with a strut which is an imaginary inline box the height of the line-height specified for the block. The line box then continues with the inline boxes of the markup, according to their line heights.
Why is the span's line-height is useless?

浏览器认为每个 line-box 的起始位置都有一个宽度为 0 的字符（CSS 文档将其称为 strut），并将其纳入 line-box 的高度的计算中。
深入理解 CSS：字体度量、line-height 和 vertical-align

<html>

<head>
    <style>
        .top {
            background-color: green;
            font-weight: bold;
        }

        .title-wrapper {
            line-height: 200px;
            background-color: orange;
        }

        .title {
            font-size: 80px;
            line-height: 50px;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div class="top">Top</div>
    <div class="title-wrapper">
        <span class="title">abczwf</span>
    </div>
</body>

</html>

为啥这个不会被撑开成200px呢？