div 中 image 底部留白问题

2025/01/06

在 HTML 和 CSS 布局中，当你在一个容器内使用了 img 标签时，图片底部会留出一定的空白区域

<!-- all:initial 用于重置样式 -->
<div class="item" style="all:initial; background-color: red;">
  <img style="all:initial;" src="https://api.ckvv.net/photos/100/100?r=11&g=101&b=11" />
</div>

这是因为图片是一个行内块级元素nline-block ，它会受到父容器的字体基线baseline的影响。因此，图片底部会留出一定的空白区域，以容纳可能存在的文字下划线或字母的“下延”

解决方案

设置 `img` 的 `display` 为 `block` `flex` 等

img {
  display: block;
}

调整容器的字体对齐方式

.item {
  font-size: 0;
  /* line-height: 0; */
}

将父容器的字体大小设置为 0，可以消除基线的影响。不过，这会影响子元素的文字内容显示

设置图片的垂直对齐方式

img {
  vertical-align: bottom; /* 或 top, middle */
}

其他受行内基线影响的元素

会受基线影响的元素主要包括：

所有行内元素：如 <span>、<a>、<em> 等。
替换元素：如 <img>、<video>、<iframe>。
表单元素：如 <input>、<textarea>。
行内块级元素：如 inline-block 和嵌套布局。
表格单元格：如 <td>、<th>。

基线影响范围广泛，但可以通过 vertical-align、display、line-height 等属性来调整布局效果。

参考

https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Typography https://github.com/jensimmons/cssremedy/issues/14