display:inline-block在div元素之后留下相对于高度的间隙

时间:2015-01-01 12:11:17

标签: html css

我在一个div中有一个div和一个图像。父div具有背景颜色。 {child}给了孩子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/

enter image description here

必须删除ebay图像和绿色块下面的间隙。感谢

4 个答案:

答案 0 :(得分:3)

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

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

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

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

最好不要使用内联样式,但我认为这只是一个例子。

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

答案 1 :(得分: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>  

给图像一个负余量应该证明是有帮助的

有任何问题,请告诉我

答案 2 :(得分:1)

根据OP的要求,&#34;必须删除ebay图像和绿色块下面的间隙。感谢&#34;

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

在图片上设置vertical-align属性并完成(请参阅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 :(得分:1)

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