显示：inline-block 在 div 元素后留下相对于高度的间隙答案

【问题标题】：display: inline-block leaves gap with respect to height after div element显示：inline-block 在 div 元素后留下相对于高度的间隙
【发布时间】：2015-01-01 12:11:16
【问题描述】：

我在一个 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 图片下方的空隙和绿色块必须移除。谢谢

【问题讨论】：

你能不能更新你的小提琴你的图像在那里不可见......解决方案也是删除和调整填充
@TusharGupta 没关系。告诉我如何消除绿色块下方的黑色间隙。
margin-bottom: -4px;同时添加到绿色 div 和图像
成功了。考虑发布作为答案。
负边距 + 幻数……我觉得有点脏

标签： html css

【解决方案1】：

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

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

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

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

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

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

【讨论】：

是的，我想通了。谢谢！
@sodawillow 下面的答案可能是大多数人想要做的。 vertical-align top 使用 display-inline: block 修复了大部分空白问题

【解决方案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元素就行了

【讨论】：

这应该是正确答案

【解决方案3】：

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

给图片一个负边距应该被证明是有帮助的

有什么问题可以告诉我

【讨论】：

为您工作？它对我不起作用。无论如何，其他解决方案有效。谢谢。
@sailesh 它可以在提供的 jsfiddle 中使用，请重试并告诉我

【解决方案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 [显示：内联表]
- ul [显示：表格行]
- li [显示：表格单元格，垂直对齐：底部]
- img#logo [显示：块，垂直对齐：底部]

它是纯 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

【讨论】：