TIL: 移除图片下方多余的空白
在当前场景下我并不想要這点多余的空白，可以通過以下方法解决：1.將图片設為 display: block; ，变成块级元素，不再是行內元素，也就不受基线影响<div style="b 2026-5-19 08:0:0 Author: taxodium.ink(查看原文) 阅读量:26 收藏

在当前场景下我并不想要這点多余的空白，可以通過以下方法解决：

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; ，应该是其中副作用最小的。


文章来源: https://taxodium.ink/til-remove-extra-empty-area-from-img.html
如有侵权请联系:admin#unsafe.sh