内联块添加底部空间

Question

我的<a>个链接设置为inline-block，并且在包含div的底部添加了一些空格。我不知道如何摆脱这种情况，并想知道是否有人可以提供帮助。

这是一个小提琴：http://jsfiddle.net/RQ69r/1/

提前致谢。

Answer 1

您可以修复将以下样式添加到内联块元素：

vertical-align: middle;

Demo

Answer 2

为什么不将其更改为display: block;？

检查更新的小提琴： http://jsfiddle.net/RQ69r/3/

如果您想要更多<a>元素彼此相邻（水平），您可以使用list-items和/或float:left;

Answer 3

这是inline-block元素的默认行为。设置父div font-size: 0px;

DEMO http://jsfiddle.net/RQ69r/7/

.row_20 {
    width: 20%;
    font-size: 0px;
}

并设置子element

的正确字体大小

.header .logo {
    font-size: 13px;  <-- set font size
    height: 45px;
    width: 100%;
    display: inline-block;
    background: blue;
}