display: inline-block leaves gap with respect to height after div element

Question

I have a div and an image in one div. Parent div has the background color. display: inline-block is given to both child div and the image.

<div style="background-color: black;">
    <div style="display: inline-block; width: 20px; height: 105px; background-color: #27ae60; margin: 0;"></div>
    <img style="display: inline-block; padding: 0px 10px;" src="http://cdn01.coupondunia.in/sitespecific/media/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812" />
</div> 

jsfiddle link

http://jsfiddle.net/hv9szL92/2/

Gap below ebay image and green block must be removed. Thanks

Answer 1

The gap is because you set child elements as display: inline-block, and inline/inline-block elements respect white spaces, including new-line characters.

The simplest fix is to set zero font-size on the parent container in order to make those white spaces zero sized.

<div style="background-color: black; font-size: 0;">
    /* content unchanged */
</div>

Remember to reset font-size back to some reasonable value for any nested element if you need to display text in them.

And it's better not to use inline styles, but I assume this is just an example in your case.

Demo: http://jsfiddle.net/hv9szL92/4/

Answer 2

As asked by OP, "Gap below ebay image and green block must be removed. Thanks"

http://jsfiddle.net/hv9szL92/5/

set the vertical-align property on the image and you're done (see Get rid of space underneath inline-block image) :

<img style="display: inline-block; padding: 0px 0px; vertical-align: top;" src="http://cdn01.coupondunia.in/sitespecific/media/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812"  />

As for the green block, just remove the nested div element