我對line-height及vertical-align的一點理解

張鑫旭老師在文章《我對CSS vertical-align的一些理解與認識（一）》中提到：

vertical-align:middle屬性的表現與否，僅僅與其父標籤有關，至於咱們一般看到的與後面的文字垂直居中顯示那都是假象！

通過摸索測試，纔對這句話有種豁然開朗的感受。

html：

<span class="box">
            <span class="dot"></span>
            匿名元素
            <span class="text"> 我是一段卡哇伊的文字。</span>
        </span>

css：

.box {
        margin: 36px 0;
        border: 1px dashed blue;
        font-size: 12px;
        color: white;
        background: red;
        /*height: 50px;*/  
    }

    .box .dot {
        display: inline-block;
        width: 16px;
        height: 16px;
        /*line-height:50px;*/
        background: white;
        vertical-align: baseline; // 這個baseline到底在哪裏
    }

    .box .text {
        vertical-align: middle;
        /*line-height:50px; */
        font-size: 16px;
    }

首先要明白的是，一個行內元素有四條看不見的線（直接複製了張老師文章裏的圖片）：

這四條線的位置由誰決定呢，我認爲是字體的大小，當字體的font-size:0時，則四線重合。
因此實際上子元素的vertical-align對齊是父元素的這幾條線，看下圖，我直接在父元素span裏放樂「匿名元素」幾個字，你能直觀的發現，子元素對齊的就是「匿名元素」的baseline

另外 ：
1.vertical-align: baseline/middle...是指此元素的baseline/middle line 和父元素的對齊
2.對於空的元素，其baseline就是底邊緣，好比.dot元素