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

Question

提问by Misha Moroshko

Why in the following codethe height of the divis bigger than the height of the img? There is a gap below the image, but it doesn't seems to be a padding/margin.

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

What is the gap or extra space below image?

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

#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

回答by Quentin

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

默认情况下，图像是内联渲染的，就像字母一样，因此它位于 a、b、c 和 d 所在的同一行上。

There is space below that line for the descendersyou find on letters like g, j, p and q.

该行下方有空格，用于您在 g、j、p 和 q 等字母上找到的降序。

You can:

你可以：

adjust the vertical-alignof the image to position it elsewhere (e.g. the middle) or
change the displayso it isn't inline.

调整vertical-align图像的以将其定位在其他地方（例如middle）或
改变它display所以它不是内联的。

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}

<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

The included image is public domain and sourcedfrom Wikimedia Commons

包含的图像是公共领域的，来自维基共享资源

Answer 2

回答by Thea

Another option suggested hereis setting the style of the image as style="display: block;"

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

Answer 3

回答by web-tiki

Quick fix:

快速解决：

To remove the gap under the image, you can:

要消除图像下方的间隙，您可以：

Set the vertical-alignproperty of the image to vertical-align: bottom;vertical-align: top;or vertical-align: middle;
Set the display property of the image to display:block;

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

See the following code for a live demo:

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

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

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

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

Explanation: why is there a gap under the image?

说明：为什么图片下面有一个缺口？

The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio....
Browsers compute their display property to inlinebut they give them a special behaviour which makes them closer to inline-blockelements (as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).

图像下方的间隙或额外空间不是错误或问题，而是默认行为。根本原因是图像被替换元素（参见MDN 替换元素）。这允许它们“像图像一样”并具有自己的内在尺寸，纵横比......
浏览器计算它们的显示属性，inline但它们赋予它们一种特殊的行为，使它们更接近inline-block元素（因为您可以垂直对齐它们，给出它们的高度，顶部/底部边距和填充，转换......）。

This also means that:

这也意味着：

<img>has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.
(source: MDN, emphasis mine)

<img>没有基线，因此当图像用于带有 vertical-align:baseline 的内联格式上下文时，图像的底部将放置在文本基线上。
（来源：MDN，重点是我的）

As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:

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

(Image source)

（图片来源）

Baseline aligned elements need to keep space for the descendersthat extend below the baseline (like j, p, g ...) as you can see in the above image. In this configuration, the bottom of the image is aligned on the baselineas you can see in this example:

基线对齐的元素需要保持空间的下伸的基线（如下面延伸j, p, g ...），你可以在上面的图片中看到。在此配置中，图像底部与基线对齐，如您在此示例中所见：

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}

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

This is why the default behaviour of the <img>tag creates a gap at the bottom of it's container and why changing the vertical-align property or the display property removes it as in the following demo:

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

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

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}

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

Answer 4

回答by Pavlo

One can also nullify parent's line height:

还可以取消父级的行高：

#wrapper {
  line-height: 0;
}

All fixes: http://jsfiddle.net/FaPFv/

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

Answer 5

回答by Daniel Díaz

All you have to do is assign this property:

你所要做的就是分配这个属性：

img {
    display: block;
}

The images by default have this property:

默认情况下，图像具有此属性：

img {
    display: inline;
}

Answer 6

回答by Santosh Khalse

You can use several methods for this issue like

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

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

Using display: flex

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

Using display:block, table, flexand inherit

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

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

回答by Abdulla khan

I used line-height:0and it works fine for me.

我用过line-height:0，对我来说效果很好。

Answer 8

回答by Timothy

I found it works great using display:block; on the image and vertical-align:top; on the text.

我发现使用 display:block; 效果很好。在图像和垂直对齐：顶部；在文本上。

.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;}

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

or you can edit the code a JS FIDDLE

或者你可以编辑代码一个JS FIDDLE

Answer 9

回答by TomoMiha

I just added float:leftto div and it worked

我刚刚添加float:left到 div 并且它起作用了

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

提问by Misha Moroshko

回答by Quentin

回答by Thea

回答by web-tiki

Quick fix:

快速解决：

Explanation: why is there a gap under the image?

说明：为什么图片下面有一个缺口？

回答by Pavlo

回答by Daniel Díaz

回答by Santosh Khalse

回答by Abdulla khan

回答by Timothy

回答by TomoMiha

相关推荐

最近更新

标签

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

提问by Misha Moroshko

回答by Quentin

回答by Thea

回答by web-tiki

Quick fix:

快速解决：

Explanation: why is there a gap under the image?

说明：为什么图片下面有一个缺口？

回答by Pavlo

回答by Daniel Díaz

回答by Santosh Khalse

回答by Abdulla khan

回答by Timothy

回答by TomoMiha

相关推荐

从 html onclick 事件调用 javascript 文件中的函数

Html 在同一页面打开链接

显示带有 html 内容的 smarty 变量

Html 如何保持网站宽度固定（与屏幕尺寸无关）

相关推荐

最近更新

标签