display：inline-block在div元素之后留下相对于高度的间隙

Question

我在一个div中有一个div和一个图像。父div具有背景颜色。 {child}给了孩子div和图像display: inline-block。

<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链接

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

必须删除ebay图像和绿色块下面的间隙。感谢

Answer 1

差距是因为您将子元素设置为display: inline-block，并且内联/内联块元素尊重空格，包括换行符。

最简单的解决方法是在父容器上设置零font-size，以使这些空格的大小为零。

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

如果您需要在其中显示文字，请记住将font-size重置为某个嵌套元素的合理值。

最好不要使用内联样式，但我认为这只是一个例子。

演示：http://jsfiddle.net/hv9szL92/4/

Answer 2

您只需编辑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>  

给图像一个负余量应该证明是有帮助的

有任何问题，请告诉我

Answer 3

根据OP的要求，＆＃34;必须删除ebay图像和绿色块下面的间隙。感谢＆＃34;

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

在图片上设置vertical-align属性并完成（请参阅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"  />

对于绿色块，只需删除嵌套的div元素

Answer 4

使用CSS表和无序列表正确对齐和格式化。

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>

通过使用CSS表，您可以使用'vertical-align：bottom;'将图像与css单元格的底部对齐。

结构如下：
- div＃container [display：inline-table]
- ul [display：table-row]
- li [display：table-cell，vertical-align：bottom]
- img＃logo [display：block，vertical-align：bottom]

它的纯粹css，但除了从90年代中期创建的表格布局以外，它的概念相同

/* 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;
}

一篇非常好的文章说明了用于CSS表格的许多概念 http://colintoh.com/blog/display-table-anti-hero