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

Question

我有一张 div 和一张合二为一的图片 div。 Parent div 有背景颜色。 display: inline-block 被赋予 child 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 link

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

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

Answer 1

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

差异是因为您将子元素设置为 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/

Answer 3

根据 OP 的要求，"Gap below ebay image and green block must be removed. Thanks"

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元素即可

Answer 4

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

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 table，您可以使用 'vertical-align: bottom;' 将图像与 css 单元格的底部对齐。

结构如下：
- div#container [显示：内联-table]
- ul [显示：table-行]
- li [显示：table-单元格，垂直对齐：底部]
- img#logo [显示：块，垂直对齐：底部]

它是纯粹的 css，但除了从 90 年代中期创建的 table 布局之外，还有相同的概念。

/* 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 tables.
中使用的许多概念 http://colintoh.com/blog/display-table-anti-hero

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

display: inline-block leaves gap with respect to height after div element

html

css

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