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

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

Answer 3

You can just edit the margin of your img
<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; margin-bottom: -3.1px;margin-left: -13.5px;" src="http://cdn01.coupondunia.in/sitespecific/MEDIA/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812" />
</div>
Giving the image a negative margin should prove to be helpful
Any problems , let me know

Answer 4

Properly aligned and formatted using CSS-tables and Unordered List.http://codepen.io/anon/pen/WvGJqq
<div id="container">
<ul>
<li id="green-block"></li>
<li id="logo-wrap"><img id="logo" src="http://cdn01.coupondunia.in/sitespecific/media/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812" /></li>
</ul>
</div>
By using CSS tables you are able to use 'vertical-align: bottom;' to align the image with the bottom of the css cell.
Structure as follows:
- div#container [display: inline-table]
- ul [display: table-row]
- li [display: table-cell, vertical-align:bottom]
- img#logo [display: block, vertical-align:bottom]
Its pure css, but the same concept besides table layout creating from the mid 90's.
/* css reset */
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
padding: 0;
margin: 0;
width: 0;
}
/* css */
#container {
width: 100%;
height: 105px;
background: #000;
margin: 0;
padding: 0;
display: inline-table;
}
ul {
display: table-row;
}
#green-block {
width: 20px;
height: 105px;
background-color: #27ae60;
margin: 0;
display: table-cell;
}
#logo-wrap {
display: table-cell;
vertical-align: bottom;
}
#logo {
display: block;
vertical-align: bottom;
margin: 0 10px;
}
A really nice article out lying many of the concepts used for CSS tables.
http://colintoh.com/blog/display-table-anti-hero