Question

For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.

You may view the issue here: http://www.client.noxinnovations.com/jensenblair/

The top image. Here is my HTML and CSS.

HTML

<div class="header"> <img src="images/photograph.jpg" /> </div>

CSS

img {
    max-width: 100%;
    height: auto !important;
}
.header {
    height: auto;   
    padding: 0;
    margin: 0 auto;
    border: none;
}

It seems to be consistent in each browser. Any ideas anyone?

Answer 1

There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/

<div>
    <img src="http://placehold.it/100x100/"/>
</div>

<div>
    <img src="http://placehold.it/100x100/" class="block"/>
</div>

<div>
    <img src="http://placehold.it/100x100/" class="inline"/>
</div>

CSS

div{
    border:solid 1px #f00;
    margin:5px;
    float:left;
}

.block{
    display:block; 
}

.inline{
    vertical-align:bottom;
}​

img tags, by default, are inline elements. Because of this, browsers will create a sort of “gutter” underneath them so that any text that wraps below it won’t be flush with the bottom of the image.

In your case, simply applying display:block to the image should do the trick.