为什么添加文本会改变边距

Question

我不明白为什么添加文本做div似乎正在改变浏览器如何解析div？看起来像margin-top被改变了,尽管它不是.

HTML

<div id="nav">
  <div class="nav-left">left</div>
  <div class="nav-logo"></div>
  <div class="nav-right">right</div>
</div>

CSS

#nav {
    width: 400px;
    height: 30px;
    background: #f5f5f5;
    border: 1px solid grey;
    text-align: center;
}
.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
}
.nav-left {
    background: red;
}
.nav-right {
    background: blue;
}
.nav-right, .nav-left {
    width: 50px;
}
.nav-logo {
    background: yellow;
    width: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

代码也在这里:http://jsfiddle.net/NcA8r/

Answer 1

vertical-align正如 @JoshCrozier 所说，您需要向 3 个 div添加 a 。

这：

.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
}

应该：

.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
    vertical-align:top;