显示:内联块在div元素后相对于高度留出间隙 [英] display: inline-block leaves gap with respect to height after div element

问题描述

我有一个div和一个div中的图像.父div具有背景色.对子div和图像都赋予display: inline-block.

I have a div and an image in one div. Parent div has the background color. display: inline-block is given to both child div and the image.

<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链接

jsfiddle link

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

ebay图像下方的空白和绿色块必须被清除.谢谢

Gap below ebay image and green block must be removed. Thanks

推荐答案

之所以出现这种差距，是因为您将子元素设置为display: inline-block，并且行内/行内块元素尊重空格，包括换行符.

The gap is because you set child elements as display: inline-block, and inline/inline-block elements respect white spaces, including new-line characters.

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

The simplest fix is to set zero font-size on the parent container in order to make those white spaces zero sized.

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

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

Remember to reset font-size back to some reasonable value for any nested element if you need to display text in them.

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

And it's better not to use inline styles, but I assume this is just an example in your case.

这篇关于显示:内联块在div元素后相对于高度留出间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！