1. 首页
  2. 问题
  3. div内的图像在图像下方有额外的空间
小编典典

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

all

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

图像下方的间隙或额外空间是什么？

#wrapper {

  border: 1px solid red;

  width:200px;

}

img {

  width:200px;

}


<div id="wrapper">

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

</div>

图像下方有间隙或空白


阅读 119

收藏
2022-03-04

共1个答案

小编典典

默认情况下，图像是内联渲染的，就像一个字母，所以它与 a、b、c 和 d 位于同一行。

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

下降器演示

你可以：

  • 调整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;

    }

    Default

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

    vertical-align: middle

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

    vertical-align: bottom

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

    display: block

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

2022-03-04