display:inline-block在div元素后留下高度间隙

Question

我有一个 div，里面包含了另一个 div 和一个图片。父 div 设置了背景颜色。给子 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图片下面的空白和绿色块。谢谢。

- Sailesh Kotha

---

请更新您的 fiddle，因为您的图片在那里无法显示……解决方案是删除和调整填充。 - Tushar

@TusharGupta 没关系。只要告诉我如何删除绿色块下面的黑色间隙即可。 - Sailesh Kotha

margin-bottom: -4px; 添加到绿色div和图片中。 - Tushar

它起作用了。考虑将其发布为答案。 - Sailesh Kotha

负边距 + 魔法数字... 对我来说有点不太好看 - sodawillow

没关系...声誉只是虚幻的。 - Tushar

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/

- dfsq

---

是的，我搞定了。谢谢！ - Sailesh Kotha

@sodawillow 的下面的回答可能是大多数人想要做的。vertical-align top 通过 display-inline: block 修复了大部分空白间隙问题。 - Kevin Sar

Answer 2

根据OP的要求，“必须删除eBay图像下方和绿色块之间的间隙。谢谢。”

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

将垂直对齐属性设置在图片上，就完成了（参见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元素。

- sodawillow

---

这应该是正确的答案。 - Kevin Sar

Answer 3

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

- Andrew Nelson

Answer 4

您可以直接编辑 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>  

给图像设置负边距应该会有帮助。

有任何问题，请告诉我。

- user4408809

---

对你有效吗？对我没用。不管怎样，其他解决方案起作用了。谢谢。 - Sailesh Kotha

@sailesh 在提供的 JSFiddle 中可以正常工作，请再试一次并告诉我。 - user4408809