奇怪的 5px 边距答案

【问题标题】：Strange 5px Margin奇怪的 5px 边距
【发布时间】：2013-04-10 09:16:23
【问题描述】：

我在这里建站：argit.bounde.co.uk

我一直在寻找几个小时来尝试找到解决方案。我正在尝试构建自己的滑块，该滑块将是流体宽度，因此我无法在可能的情况下定义高度/宽度。我已经让大部分滑块与库存图像一起使用，但是当我将元素放在它下面时，它们比预期的低 5 像素。这发生在除我测试过的 IE 之外的所有浏览器中。我想给我的滑块下方的横幅一个负的上边距，以便它显示在滑块上，但直到我弄清楚是什么导致了这个 5px 边距我不能。

html 在这里：

<div id="slider">
  <div id="sliderwidth">
    <ul>
      <li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li>
      <li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li>
      <li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li>
      <li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li>
    </ul>                           
  </div>                        
</div>  

<div id="sliderborder">

我尝试过的事情：

删除所有 jQuery：没有用。
删除所有 CSS 样式的滑块：不起作用。
将 img 高度设置为 300 像素：不起作用。
将 li 高度设置为 300 像素：worded。
用 300px 高的 div 替换 imgs：工作。
为滑块中的每个元素设置填充 0、边距 0：不起作用。
检查验证错误：完全验证。
检查的图像高 300 像素：它们是。
检查开发工具中的每个元素以检查任何流氓边距/填充：未找到。

我真的没有想法，任何帮助将不胜感激！

【问题讨论】：

另外，将您的 <img></img> 替换为 <img />。

标签： html css slider margin padding

【解决方案1】：

没有什么奇怪的...只需将display:block 添加到您的图像中即可。

默认情况下，所有图像都是inline-elements（内联或内联块）并作为一行文本处理。这个空间是y 或g 的悬挂部分。这解释得很糟糕，但你明白了。

div#slider ul li img {
    width: 100%;
    display: block;
}

【讨论】：

这是一个绝对合法的解决方案，而不是一个技巧。如果我遵循您的想法，为什么他将 with 设置为 100%？改变 html 的视觉外观是 CSS 的工作原理。
@Bandye... 这不是一个技巧，尽管解释它为什么起作用会很有用。默认情况下，图像是inline-block 元素（在某些浏览器中为inline）。因此，它们与文本并排放置：可见的空间用于“p”和“q”等字母的下行。将display 属性设置为block 可以解决这个问题。另一种方法是将vertical-align 属性显式设置为默认baseline 以外的其他值。不过，对于像这样的图像滑块，display: block 似乎更合适。

【解决方案2】：

试试看

div#slider ul img {
    display: block;
    width: 100%;
}

或

div#slider ul img {
    vertical-align: top;
    width: 100%;
}

因为默认情况下，图像是内联块元素，所以它们可能需要适当的垂直对齐设置

【讨论】：

【解决方案3】：

您只需像这样添加vertical-align: bottom;：

div#slider ul li img {
    width: 100%;
    vertical-align: bottom;
}

【讨论】：

【解决方案4】：

由于某种原因，我的网站顶部和左侧只有 5 像素的边距。我无法摆脱它......直到我将 body 元素的边距设置为 0。问题解决了。希望这可以帮助遇到这个烦人问题的任何人。 :)

【讨论】：