【问题标题】: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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-18
    • 2010-10-11
    • 1970-01-01
    相关资源
    最近更新 更多