我不明白为什么添加文本 do a div 似乎会改变浏览器解析 div 的方式？看起来边距顶部已更改，但事实并非如此。

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/ http://jsfiddle.net/NcA8r/

正如@JoshCrozier所说，你需要添加一个vertical-align到你的 3 个 div。

This:

.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;