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

Question

我在一个 div 中有一个 div 和一个图像。父 div 具有背景色。 display: inline-block 被赋予子 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> 

jsfiddle 链接

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

必须删除 ebay 图片和绿色 block 下方的间隙。谢谢

Answer 1

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

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

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

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

最好不要使用内联样式，但我认为这只是您的示例。

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