CODEWITHSUNDEEP
htmlcss
Sailesh Kotha
Sailesh Kotha

Reputation: 2099

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

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/

enter image description here

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

Upvotes: 3

Views: 3437

Answers (4)

Andrew Nelson
Andrew Nelson

Reputation: 11

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

Upvotes: 1

user4408809
user4408809

Reputation:

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

Upvotes: 1

sodawillow
sodawillow

Reputation: 13176

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

Upvotes: 4

dfsq
dfsq

Reputation: 193271

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/

Upvotes: 4

Related Questions