修复使用时出现在LI元素上的间隙：after

Question

请看一下这个小提琴http://jsfiddle.net/EWUTX/

这些是使用的样式：

.box { position: relative; display:inline-block;}
.box:after {
    position: absolute;
    width: 100%;
    height: 10px;
    background: green;
    content: '';
    bottom:-10px;
    left:0;
}

在 li 元素上使用样式时，我会得到一个 5px 小的差距，但在 div 标记上则没有。

如果我指定f ont-size: 0px，那么差距就会消失。但随后li内的所有文字都消失了。

随着li的字体大小增加，差距会扩大。

是否有一种风格可以摆脱这种差距，而不需要对字体大小进行任何硬编码？

再次提起：http://jsfiddle.net/EWUTX/

由于

PS：我实际上是在内部构建一个CSS框架，用户可以在其中指定状态（使用类），如“started”，“not-started”等。

使用时，元素应在下方显示不同颜色的小条。用户可以在任何元素上使用此类。

Answer 1

该差距是行高保留字符的一部分，如'p'字母。 如果你没有为div设置高度，你将得到相同的差距。如果你想从像img这样的内联元素中删除它，可以将vertical-align设置为底部：

.box img {
    vertical-align: bottom;
}

请参阅：http://jsfiddle.net/DhTzp/

Answer 2

它是塑造空白的图像;

img{ display: block; }