Html 显示：内联块在div元素后相对于高度留有间隙

我有一个div和一个div中的图像。父div有背景色<代码>显示：内联块同时提供给子div和图像

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

JSFIDLE链路

---

必须删除易趣图像下方的间隙和绿色块。谢谢

您可以编辑您的

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>  

给图像加上一个负的边距应该是有帮助的

---

如果有任何问题，请告诉我

间隙是因为您将子元素设置为

显示：内联块

，而内联/内联块元素尊重空格，包括新行字符

最简单的解决方法是在父容器上设置零

字体大小

，以使这些空格的大小为零

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

/*内容不变*/

如果需要在任何嵌套元素中显示文本，请记住将

font size

重置回某个合理的值

最好不要使用内联样式，但我假设这只是您的例子

演示：如OP所问，“必须删除易趣图片下方的间隙和绿色块。谢谢”

在图像上设置垂直对齐属性，即可完成（请参见）：

至于绿色块，只需删除嵌套的div元素，使用CSS表和无序列表正确对齐和格式化即可。

这是一篇非常好的文章，介绍了CSS表使用的许多概念。

---

你能帮我更新你的小提琴吗？你的图像在那里看不见……解决办法是移除并调整小提琴padding@TusharGupta没关系。请告诉我如何消除绿色块下方的黑色间隙。下边距：-4px；添加到绿色div和它工作的图像。考虑作为一个答案张贴。我觉得有点脏为你工作？这对我不起作用。不管怎样，其他的解决办法也奏效了。谢谢。@sailesh它在提供的JSFIDLE中工作，请再试一次并让我知道是的，我找到了。非常感谢。

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