Question

为什么在following code div的高度大于img的高度？图像下方有一个间隙，但它似乎不是填充/边距。

图片下方的差距或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Image with a gap or white space under it

Answer 1

默认情况下，图像是内嵌呈现的，就像字母一样。

它与a，b，c和d坐在同一条线上。

在f，j，p和q等字母上找到的下降线下方有一个空格。

您可以调整图片的vertical-align以将其放置在其他位置（例如middle）或更改display，使其不是内联的。

Answer 2

另一个建议here的选项是将图片的样式设置为style="display: block;"

Answer 3

快速修复：

要删除图片下的空白，您可以：

将图片的vertical-align属性设置为vertical-align: bottom; vertical-align: top;或vertical-align: middle;
将图像的显示属性设置为display:block;

请参阅以下代码以获取实时演示：

＆＃13;

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}

＆＃13;

<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

＆＃13;

说明：为什么图像下面有空隙？

图像下的间隙或额外空间不是错误或问题，它是默认行为。根本原因是图像是替换元素（请参阅MDN和W3C ）。这使他们能够像图像一样行事。并有自己的内在尺寸，纵横比.... 浏览器将其显示属性计算为inline，但它们为它们提供了一种特殊行为，使它们更接近inline-block元素（因为您可以垂直对齐它们，给它们一个高度，顶部/底部边距和填充，变换...）。

这也意味着：

[...]在内联格式化上下文中使用图像时 vertical-align：baseline，图像的底部将构成容器的基线。（来源：MDN，强调我的）

由于浏览器默认将vertical-align属性计算为baseline，因此这是默认行为。下图显示了基线在文本上的位置：

Location of the baseline on text

基线对齐元素需要为descenders保留空间，使其延伸到基线以下（如j, p, g ...），如上图所示。在此配置中，图像的底部在基线上对齐，如您在此示例中所示：

＆＃13;

div{border:1px solid red;}
img{width:100px;height:auto;}

＆＃13;

<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

＆＃13;

这就是<img>标记的默认行为在其容器底部创建间隙的原因以及为什么更改vertical-align属性或display属性会将其删除，如下面的演示：

＆＃13;

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}

＆＃13;

<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

＆＃13;

Answer 4

也可以使父级的行高无效：

#wrapper {
  line-height: 0;
}

所有修正：http://jsfiddle.net/FaPFv/

Answer 5

您所要做的就是分配此属性：

img {
    display: block;
}

默认情况下，图片具有以下属性：

img {
    display: inline;
}

Answer 6

您可以使用多种方法解决此问题，例如

使用line-height
```
#wrapper {  line-height: 0px;  }
```

使用display: flex

#wrapper {  display: flex;         }
#wrapper {  display: inline-flex;  }

使用display: block，table，flex和inherit

#wrapper img {  display: block;    }
#wrapper img {  display: table;    }
#wrapper img {  display: flex;     }
#wrapper img {  display: inherit;  }

Answer 7

我使用了line-height:0，它对我来说很好。

Answer 8

我发现使用display：block;在图像上和vertical-align：顶部;在文本上。

＆＃13;

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}

＆＃13;

<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

＆＃13;

或者您可以编辑代码JS FIDDLE

Answer 9

我刚刚将float:left添加到div中并且有效

div内的图像在图像下方有额外的空间

9 个答案:

快速修复：

说明：为什么图像下面有空隙？