与外太空的距离答案

【问题标题】：Spacing from outer space与外太空的距离
【发布时间】：2010-04-23 23:12:12
【问题描述】：

我只是想知道图像末尾和 li 末尾之间的这个空间是从哪里来的：

它只是一个简单的 UL > 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

有人可以帮帮我吗？我为你可以看到我所说的间距的边框着色。我用的是火狐。

【问题讨论】：

也许屏幕截图会有所帮助，我没有看到任何看起来不需要的空间。
@jye：在每张图片之后，与下一张图片之间有一个小的（4 或 5 像素）间隙（至少在 IE8 中）。我相信这就是 OP 所指的。
为你添加了截图。
我明白你现在指的是什么 - 还不知道为什么会这样渲染。

标签： html css

【解决方案1】：

尝试将这些图像和/或 LI 元素的 line-height 设置为 0。目前，您在正文中将其设置为 1.4，而 img 将继承它。在 Firebug 中设置 line-height: 0 的简短测试使图像堆栈刷新。

【讨论】：

成功了！我爱你！因为什么时候 lineheight 适用于 IMG 或 LI 的标签，其中没有任何文本？？
行高适用于

为什么 lineheight 应用在块类型对象上？

@meo：图像实际上是内联对象（有时是内联块）。关键是，它们受线高样式的影响。

【解决方案2】：

如果你想消除差距，你可以尝试：

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

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

但是，这个差距有什么问题？我有点喜欢。帮助构图每个图像...

【讨论】：

我会用它做一个图像滑块：P 图像会重叠，但我必须在之前摆脱这个间隔 :( 我已经在 reset.css 中将所有边距和填充设置为 0m

【解决方案3】：

图像和文本一样是内联元素，默认情况下它们位于字体基线上，为升序留出空间。有多种方法可以阻止这种情况：

line-height: 0（根据 Robusto 的建议）
display: block
vertical-align: bottom

【讨论】：

我的意思是把它应用到图像上，而不是li