html 如何文本边距,html – 为什么添加文本会更改边距

参见英文答案 >

Why is this inline-block element pushed downward?                                    8个

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

HTML

left

right

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;

}