Question

所以我有一个非常简单的标记。

<!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。

Answer 1

因为<div>是一个块元素，您必须指定它的宽度和高度，否则它将被包裹在<div>元素内的内容周围。

确实将其显示更改为display:inline;或display:inline-block;会改变他的正常行为。