css - 内联块和底部的像素

Question

我有一个带显示的简单 div：inline-block; 和一个环绕它的中心。它出现在内容底部的一个像素。你知道为什么以及如何摆脱它吗？

这是要检查的问题：http: //jsfiddle.net/8S8aH/

HTML：

<div class="wrap">
    <div id="content"></div>
</div>

CSS：

body{
    margin:0;
}
.wrap {
    text-align: center;
    background:red;
}
#content {
    margin:0px auto;
    text-align:left;
    width:250px; height:100px;
    display: inline-block;
    background:whiteSmoke;
}

Answer 1

用于display: block内容 div

#content {
    margin:0px auto;
    text-align:left;
    width:250px; 
    height:100px;
    display: block;
    background:whiteSmoke;
}

JS 小提琴演示

Answer 2

就个人而言，我更喜欢这样来清除inline-block元素中的空间。

演示

#content:after{
    content:'\00a0';
}

还有其他选择。

Answer 3

更改vertical-align值#content

#content {
    display: inline-block;
    vertical-align: bottom;
}

http://jsfiddle.net/8S8aH/4/