内联块和底部的像素

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 Fiddle Demo

Answer 2

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

Demo

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

还有alternatives。

Answer 3

更改vertical-align

上的#content值

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

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