White space under image [duplicate] - html

Question

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I can't remove white space under my images after i added boarder.
How do i get rid of this?
<div style="width: 1200px;">
<div style="float: left; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div>
<div style="clear: both;"> </div>
</div>
</div>
</div>
http://postimg.org/image/5rvgc5h8p/
Fiddle: https://jsfiddle.net/mastervision/zap4smbm/
I use the Magento editor: http://postimg.org/image/c62ljlmoj/

Answer 1

Add this
div{
line-height: 0;
}
Fiddle

Answer 2

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 3

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 4

Try
img {display: block;}
if images dimensions are right and you are still having white space.

Answer 5

One option would be to use the vertical-align property; e.g.
img {
vertical-align: baseline;
}