Question

我只是想知道图像的结尾和李的结尾之间的这个空间来自哪里：

它只是一个简单的UL＆gt; li> IMG

spacing from hell http://bluesys.ch/lussy/spacingfromhell.jpg

代码：

div#slider {
    border: 5px solid #fff;
}

div#slider ul li {
    border-bottom: 1px solid pink;
}

div#slider ul li img {
    border-bottom: 1px solid green;
    margin: 0;
}

请注意，我的reset.css

将所有边距和填充都设置为0 有人可以帮帮我吗？我给边框上色了，你可以看到我所说的间距。我用firefox。

Answer 1

尝试将这些图像和/或LI元素的行高设置为0。目前你在身体中设置为1.4，img将继承它。在Firebug中设置line-height: 0的简短测试使图像堆叠齐平。

Answer 2

如果你想摆脱差距，你可以试试：

li  {
  margin-bottom: 0;
  padding-bottom: 0;
}

您可能需要为这些li元素设置一个特殊类，以便应用的CSS不会对网站上的所有li元素执行此操作。

但是，差距有什么不对？我有点喜欢它。帮助构建每个图像...

Answer 3

图像是内联元素，就像文本一样，默认情况下它们位于字体基线上，为ascender留出空间。有不同的方法可以阻止它：

line-height: 0（由Robusto建议）
display: block
vertical-align: bottom

来自外太空的间距

3 个答案: