Strange 5px Margin | 易学教程

问题

I am building a website here: argit.bounde.co.uk

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.

The html is here:

<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">

Things I have tried:

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!!

回答1:

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

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;
}

回答2:

just try with

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

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

since, by default, images are inline-block elements so they may need a proper vertical-align setting

回答3:

All you have to do is just add vertical-align: bottom; like this:

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

回答4:

For some reason, I just had a 5px margin at the top of my website and to the left side. I couldn't get rid of it... until I set the margin on the body element to 0. Problem solved. Hope this helps anyone that comes across this annoying issue. :)

来源：https://stackoverflow.com/questions/15921704/strange-5px-margin

标签

html

css

slider

margin

padding