6

请看看这个小提琴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”等。

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

4

2 回答 2

6

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

.box img {
    vertical-align: bottom;
}

见：http: //jsfiddle.net/DhTzp/

于 2013-08-21T14:54:18.060 回答
1

它是创建空白的图像；

img{ display: block; }
于 2013-08-21T14:58:28.137 回答