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

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

这：

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

Answer 2

之所以发生这种情况，是因为您在内部div中使用了display: inline-block;。

默认情况下，内联块元素为vertical-align:baseline;。

请查看此great answer。

“CSS中vertical-align的默认值是基线。”

还有this one。

为什么向div添加文本会更改边距

2 个答案: