css - 行内 block 和底部的像素

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

更改 #content 上的 vertical-align 值

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

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