为何display:block可使img高度适配父div并消除底部间隙？

首先得澄清一个误区：display:block并没有让图片高度“适配”父div，它只是消除了行内元素特性带来的基线间隙。

间隙的本质原因 #

img标签默认的显示模式是inline-block（行内块元素），这类元素会和文本的基线对齐。文本的基线下方会预留一小段空间（用来容纳g、y这类下沉的字母），这部分空间就是你看到的图片底部与父div之间的微小间隙。此时父div的高度是由内部内容（图片+基线间隙）共同撑起的，所以div的高度会比图片本身高一点。

设置display:block后的变化 #

当把img设为display:block后，它变成了块级元素：

• 块级元素不会参与文本流的基线对齐逻辑，不会预留基线下方的空间；
• 它会独占一行，底部直接贴合父容器的底部，看起来像是高度“适配”了父div，实则是间隙被彻底消除了。

块级元素的高度规则 #

块级元素的高度默认遵循“内容撑起”原则：

• 没有设置固定高度时，高度由内部所有子元素的总高度决定；
• 只有当你给块级元素设置了height、min-height，或者通过flex/grid等布局让它强制撑满父容器时，它才会主动适配容器高度。

如果想让图片真正撑满父div的高度（比如父div高度不固定时），可以搭配height: 100%和object-fit: cover（或contain），同时确保父div有明确的高度来源（比如作为flex容器的子项，或者设置了height值）。

相关代码示例 #

CSS代码

div {
  width: 50vw;
  margin: 100px auto;
  border: 2px solid red;
}

img {
  width: 100%;
  display: block;
}

HTML代码

<body>
  <p>before and after psuedo elements</p>
  <div>
    <img src="big.jpeg" alt="" />
  </div>
</body>

内容的提问来源于stack exchange，提问作者Samrudh S