爲什麼div不適合基於嵌套跨度高度的高度

我剛剛發現了一個我無法理解的問題。爲什麼這個div比嵌套跨度大？我認爲div適合其內容。爲什麼div不適合基於嵌套跨度高度的高度

div { 
 
    border: 1px solid black; 
 
} 
 

 
span { 
 
    font-size: 9px; 
 
    border: 1px solid black; 
 
}

<div> 
 
    <span>This is test label</span> 
 
</div>

來源

2015-07-09 Behnil

什麼是div的父元素？我也看不到字體大小以外的其他字體的大小。 – L4zl0w

添加display: table-cell到span標籤。 div沒有這樣的行爲，它可以自動完全符合孩子的內容。

div { 
 
    border: 1px solid black; 
 
} 
 

 
span { 
 
    font-size: 9px; 
 
    border: 1px solid black; 
 
    display: table-cell; 
 
}

<div> 
 
    <span>This is test label</span> 
 
</div>

如果你想div還的寬度符合該span的寬度，增加display: table-cell到div標籤。

來源

2015-07-09 22:09:16

你能解釋爲什麼在span上添加'display：table-cell'會強制外部div高度與該跨度相匹配嗎？ – Behnil

@Behnil顯示：表格單元格不會強制外部div匹配跨度的高度，而是跨度匹配div的高度。 display：table-cell使跨度表現得像一個td標記，它填充了div的高度，因爲你的標記只有一個單元格。如果一個表格只有一個單元格，則不管表格（div）有多長時間，該單元格都將填充表格的高度。 –

但是，當您運行我的代碼段和代碼段時，可以看到跨度高度相同。另一方面，在你的例子中，div變小了。我很困惑。 – Behnil

看起來，當字體縮小時，父div保留了它最初加載的行高，將div的行高設置爲與font-size相同，並添加了一個額外的像素，並對齊跨越垂直上方，它會做的伎倆：

div { 
 
    border: 1px solid black; 
 
    line-height: 10px; 
 
    } 
 

 
span { 
 
    font-size: 9px; 
 
    vertical-align: top; 
 
    border: 1px solid black; 
 

 
}

<div> 
 
    <span>This is test label</span> 
 
</div>

來源

2015-07-09 22:14:50 KAD

爲什麼div不適合基於嵌套跨度高度的高度

回答

相關問題