White space under image [duplicate]

Answer 1

One option would be to use the vertical-align property; e.g.

img {
    vertical-align: baseline;
}

Answer 2

It's because the source of your image is supposedly not the right size or aspect ratio for this size. If you could post a fiddle, I would be able to test this theory. You can fix it by using the object-fit property or using the background property.

Answer 3

Add this

div{
line-height: 0;
}

Fiddle

Answer 4

In your floated container, give your images display: block; and width: 100%.

This will cause the image to stretch it's width to it's parents width and if this parent has no height defined it should fit exactly.

If that doesn't work please post a comment under my answer and I'll setup a case for you when I find the time ;)

OFFTOPIC

Oh and ofcourse you'll want to get rid of all that inline CSS. inline css is pure duplication of code and can be solved with external stylesheets.

In such a stylesheet you can style by name basically so you can do this in your stylesheet:

.my-image-box {
    position: relative;
    float: left;
    width: 300px;
    height: auto;
}

.my-image-box img {
    display: block;
    width: 100%;
}

Then in your HTML, after linking your fresh stylesheet you can do this:

<div class="my-image-box">
    <img src="..." />
</div>

This means you don't have all that bulky CSS in your HTML file - making it alot smaller and as an added bonus, when you change something in your stylesheet you'll change it everywhere at the same time :D

IMO that is a double win!

Answer 5

Try img {display: block;}

if images dimensions are right and you are still having white space.