奇怪的5px保证金

Question

我在这里建立一个网站:argit.bounde.co.uk

我一直在寻找几个小时试图找到解决方案.我正在尝试构建自己的滑块,这将是流体宽度,因此我无法在可能的情况下定义高度/宽度.我有大量的滑块使用库存图像但是当我把元素放在它下面时,它们比它们想要的低5px.这种情况发生在除我测试的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高度设置为300px:没有用.
将li高度设置为300px:措辞.
替换imgs与divs 300px高:工作.
设置填充0,边距0到滑块中的每个元素:没有工作.
检查验证错误:完全验证.
已检查的imgs是300px高:它们是.
检查开发工具中的每个元素以检查是否存在任何流氓边距/填充:未找到.

我真的出于想法,任何帮助将不胜感激!

Answer 1

没有什么奇怪的...只需添加display:block到您的图像.

默认情况下,所有图像都是inline-elements(内联或内联块)并作为一行文本处理.这个空间是一个y或g将要去的地方.这很难解释,但你明白了.

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