Question

I have embedded a SoundCloud widget on my page below an image.

There is a small space between the bottom of the image and the top of the widget. I’ve used Web Inspector to track down where this gap is coming from but I cannot find it. I would like to remove this space.

The code is quite simple:

<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Image-New_Delhi_Lotus.jpg">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F66379982?"></iframe>

View the code in action: http://jsfiddle.net/LAn3A/

I can’t even tell if this gap is due to a border, padding or a margin. I am certain it is coming from the SoundCloud widget though.

Answer 1

This can happen when you try closely position an inline element next to a block-level element. Text properties such as line-height get in the way. Fix it by setting the image to a block level element:

img { display: block;}