vertical-alignment - 具有空内容的内联块使布局混乱（垂直对齐）？

Question

我正在处理一些 css 并遇到了一个奇怪的问题。两个元素inline-block留在同一个容器中。它们都有width,height和line-height.

但是如果我们将第一个元素设置为空的内容，布局就会混乱（垂直对齐）。

你可以在这里看到问题

<div class="part">
  <div class="foo"></div>
  <div class="bar">bar</div>
</div>

.part {
  width: 400px;
  height: 80px;
  background-color: #ddd;
  margin-bottom: 100px;
}
.foo {
  display: inline-block;
  width: 100px;
  height: 80px;
  line-height: 80px;
  background-color: red;
}
.bar {
  display: inline-block;
  width: 100px;
  line-height: 80px;
  height: 80px;
  background-color: green;
}

我知道空内容总是难闻的 html 代码。但我只想知道为什么会这样以及如何解决这个问题。

我发现了一个类似的问题。人们说我们可以使用 a&nbsp而不是空内容。这是我们唯一可以解决的方法吗？还是我们有其他更好的解决方案？

谢谢。

Answer 1

使用“垂直对齐：中间；” 到 inline-block 元素
vertical-align: middle;
http://jsbin.com/ajexab/1/edit