如何移除开发者工具无法识别的封面图与文章模块间的空白

问题根因 #

该空白是img这类行内替换元素的默认基线对齐特性导致的：浏览器默认会为行内/行内块级元素预留出英文下行字母的展示空间，这部分间隙不会显示在开发者工具的盒模型参数里，所以很难直接定位。

可用解决方案（任选其一即可） #

• 给封面img标签添加block类，将图片转为块级元素，直接消除基线对齐带来的默认间隙
• 给封面img标签添加align-bottom类，将图片垂直对齐方式改为底部对齐，抵消基线预留空间
• 给img标签的父容器添加leading-0类，将父容器行高设为0消除间隙

代码示例 #

修改前：

<img src="封面图地址" alt="文章封面">

修改后（以方案1为例）：

<img class="block" src="封面图地址" alt="文章封面">

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