奇怪的5px边距 [英] Strange 5px Margin

问题描述

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

我一直在寻找时间来尝试找到解决方案。我试图建立自己的滑块，这将是流体宽度，所以我不能在可能的情况下定义高度/宽度。我有大量的滑块工作与股票图像，但是，当我把元素放在它下面，它们比他们的意思是低5px。这发生在所有浏览器，除了IE我已经测试。我想给我的滑块下面的横幅负顶部边距，以便它将显示在滑块上，但直到我能弄清楚是什么导致这个5px的边距我不能。

I have been searching for hours to try and find the solutions. I am trying to build my own slider which will be fluid width so I cant define height / width where possible. I have got the bulk of the slider working with stock images however when I put elements underneath it they are 5px lower than they are meant to be. This happens in all browsers except IE that I have tested. I want to give the banner which is underneath my slider a negative top margin so that it will display over the slider but until I can figure out what is causing this 5px margin I cant.

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样式滑块： didnt work 。

将img高度设置为300px： did not work 。

将li高度设置为300px：字词。

将div替换为300像素高： 工作。
$
设置为滑块中的每个元素填充0，margin 0：没有工作。

验证错误：已完全验证。

检查的imgs为300像素高： 。

检查开发工具中的每个元素，以检查是否有任何流氓边缘/填充：找不到。

Removing all jQuery: didnt work.
Removing all CSS styling the slider: didnt work.
Setting img height to 300px: didnt work.
Setting li height to 300px: worded.
replacing imgs with divs 300px high: worked.
setting padding 0, margin 0 to every element in the slider: didnt work.
checked for validation errors: fully validated.
checked imgs are 300px high: they are.
checked every element in dev tools to check for any rogue margin/padding: none found.

我从字面上的想法，任何帮助将非常感谢！

I am literally out of ideas, any help would be greatly appreciated!!

推荐答案

没有什么奇怪...只需添加 display：block

There is nothing strange... Just add display:block to your images.

默认情况下，所有图片都是 inline-elements （inline或inline-block）一行文本。这个空间是 y 或 g 的挂起部分。

By default all images are inline-elements (inline or inline-block) and handled as a line of text. This space is where the hanging part of a y or gwould go. This very poorly explained but you get the idea.

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

这篇关于奇怪的5px边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！