Remove white space in images

Question

I have many images and my code is the following.

There is white space in some of the images in top or left of some images. I couldn't find how to fix it. I've set width and max-width.

I save images as tmb file. Is it possible to be due to it?

What should I fix? Thanks!

 .pbombd-thumbnail { float:left; margin-top: 10px; margin-right: 17px; width: 220px; padding: 0px !important; border-radius: 4px; border: 0px; } .pbombd-img-thumb { max-width:218.4px; max-height: 178px; min-width: 218.4px; min-height: 178px; margin:0px; border-top-left-radius: 4px; border-top-right-radius: 4px; }

 <div class="thumbnail pbombd-thumbnail"> <a href="#"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350" class="pbombd-img-thumb"/> </a> </div>

Edited: I forgot to add this css in question:

.thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857; background-color: #FFF; border: 1px solid #DDD; border-radius: 4px; transition: all 0.2s ease-in-out 0s; }

Answer 1

Add display: block; to .pbombd-img-thumb . Displaying as inline or inline-block can cause extra space.

 .pbombd-thumbnail { float:left; margin-top: 10px; margin-right: 17px; width: 220px; padding: 0px !important; border-radius: 4px; border: 0px; background-color: orange; } .pbombd-img-thumb { display: block; max-width:218.4px; max-height: 178px; min-width: 218.4px; min-height: 178px; margin:0px; border-top-left-radius: 4px; border-top-right-radius: 4px; }

 <div class="thumbnail pbombd-thumbnail"> <a href="#"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350" class="pbombd-img-thumb"/> </a> </div>

Answer 2

Try adding vertical-align: middle; to the css of the img element. Some media elements have white space.