0

I have this image slider and there is an unwanted gap a few pixels high right under the slider. I wanted to add a box-shadow to it but as you can see in the jsfiddle it looks horrible because of the gap, I've hightlighted the slider with a red border so you can see the gap, what is the cause of this? can it be fixed?

#slider {
    width:40%;
    float:left;
    border: 2px solid red;
    box-shadow: 0px 0px 4px 4px #000;
}

jsfiddle : http://jsfiddle.net/SWVys/4/

Jdunne08
  • 11
  • 1
  • This question comes up quite a bit, the solution is to add `display:block` to `#slider img` - http://stackoverflow.com/questions/7774814/remove-white-space-below-image and https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=img+gap+css++site:stackoverflow.com for example. – Nick R Jun 24 '14 at 11:50
  • @NickR this worked, thanks. how can I rep you for this, i dont see the option? – Jdunne08 Jun 24 '14 at 12:34

1 Answers1

0

Images are by default inline elements. They have white space added around them to provide a buffer between them and other elements.

Just add this to your CSS:

#slider img {
    display: block;
}

DEMO

Turnip
  • 35,836
  • 15
  • 89
  • 111