設置顯示：內嵌到div導致零寬度和高度

所以我有這樣一個非常簡單的標記。設置顯示：內嵌到div導致零寬度和高度

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div class="foo"> 
    <div>a</div> 
</div> 
</body> 
</html>

和CSS：

.foo { 
    background-color: #eee; 
    height: 80px; 
    line-height: 80px; 
    display: inline; 
    vertical-align: middle; 
}

但這使得div.foo有0的寬度和高度爲0。如果我將顯示設置爲inline-block，它可以工作。爲什麼？
這是本帖子的JSBin。

來源

2014-04-07 John Wu

'width'和'height'僅適用於'block'或'inline-block'元素，內嵌元素的大小僅取決於'margin'和內容。這是設計，所以沒有答案爲什麼。當然，這是內聯和塊之間最大的區別。 –

@KingKing - 內聯元素的高度也受行高的影響。 –

@BryanDowning啊是的，想念那個。 –

因爲<div>是一個塊元素，所以您必須指定它的寬度和高度，否則它將環繞<div>元素內的內容。

確實將其顯示改爲display:inline;或display:inline-block;改變了他的正常行爲。

來源

2014-04-07 22:56:02 brobken

設置顯示：內嵌到div導致零寬度和高度

回答

相關問題