Css 内联块和底部的一个像素

我有一个带有显示的简单div：inline块；和一个包裹，使其居中。它在内容的底部显示一个像素。你知道为什么以及如何摆脱它吗

下面是要检查的问题：

HTML:

---

对内容div使用

display:block

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

---

就我个人而言，我更喜欢这样来清除

内联块

元素中的空格

---

还有。

更改

内容上的
垂直对齐
值

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

它适用于我简化的这个特定情况。但是如果我使用显示块，我必须指定内容中心的宽度和高度。所以我必须使用内联块，这就是问题所在。好吧，在这种情况下，
vertical align:bottom
似乎起作用了。你能解释一下吗？为什么\00a0？同样。这是什么魔法？你到底是如何发现这就是解决方案的？
#content {
    margin:0px auto;
    text-align:left;
    width:250px; 
    height:100px;
    display: block;
    background:whiteSmoke;
}

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

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