修复使用时出现在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/