在当前场景下我并不想要這点多余的空白，可以通過以下方法解决：
1.將图片設為 display: block; ，变成块级元素，不再是行內元素，也就不受基线影响
<div style="border: 2px solid;">
<img style="display:block;" src="/images/album/20251226T172918--梦想家-the-dreamer__20241018_khalilfong_albumwall_image_方大同.webp" />
</div>
2.給图片容器設置 line-height: 0; ，行高為 0，基线底部也不存在高度
<div style="border: 2px solid; line-height: 0;">
<img src="/images/album/20251226T172918--梦想家-the-dreamer__20241018_khalilfong_albumwall_image_方大同.webp" />
</div>
3.給图片設置 vertical-align: top; /* or bottom */ ，不和基线对齐，和行的上下边䧘对齐
<div style="border: 2px solid;">
<img style="vertical-align: top;" src="/images/album/20251226T172918--梦想家-the-dreamer__20241018_khalilfong_albumwall_image_方大同.webp" />
</div>
你可以基于使用场景选择合适的方案，我一般会用 vertical-align: top; ，应该是其中副作用最小的。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。