div内的图像在图像下方有额外的空间-前端问题

Image inside div has extra space below the image(div内的图像在图像下方有额外的空间)

本文介绍了div内的图像在图像下方有额外的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

What is the gap or extra space below image?

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

<div id="wrapper">
  <img src="aHR0cDovL2kuaW1ndXIuY29tL1JFQ0RWMjQuanBn" />
</div>

解决方案

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.

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

You can:

adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.

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="aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi9mL2YyL1ZhbmdvZ2hTdGFycnktbmlnaHQyLmpwZy8zMDBweC1WYW5nb2doU3RhcnJ5LW5pZ2h0Mi5qcGc=" alt="IiZndDsNCiZsdDsvZGl2Jmd0Ow0KDQombHQ7ZGl2IGlkPQ=="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi9mL2YyL1ZhbmdvZ2hTdGFycnktbmlnaHQyLmpwZy8zMDBweC1WYW5nb2doU3RhcnJ5LW5pZ2h0Mi5qcGc=" alt="IiZndDsgJmx0Oy9kaXYmZ3Q7DQogIA0KICAmbHQ7ZGl2IGlkPQ=="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi9mL2YyL1ZhbmdvZ2hTdGFycnktbmlnaHQyLmpwZy8zMDBweC1WYW5nb2doU3RhcnJ5LW5pZ2h0Mi5qcGc=" alt="IiZndDsgJmx0Oy9kaXYmZ3Q7DQoNCiZsdDtkaXYgaWQ9"display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi9mL2YyL1ZhbmdvZ2hTdGFycnktbmlnaHQyLmpwZy8zMDBweC1WYW5nb2doU3RhcnJ5LW5pZ2h0Mi5qcGc=" alt="">
</div>

The included image is public domain and sourced from Wikimedia Commons

这篇关于div内的图像在图像下方有额外的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！