设置显示：内嵌到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导致零宽度和高度

回答

相关问题