为什么行内inline元素后的间隙空白有时候有有时候没有？

Question

本地打开
file:///C:/front_end/temp.html

/* HTML 代码 */
<div class="father">
    <div class="son"><img src="https://www.runoob.com/try/demo_source/logocss.gif"></img></div>
    <div class="son">
        <img src="https://www.runoob.com/try/demo_source/logocss.gif">
    </div>
    <div class="son">
        <img src="https://www.runoob.com/try/demo_source/logocss.gif">
    </div>
</div>

84px
img后边就没有间隙空白

但是在codepen里，就有

88px
https://codepen.io/rhdom/pen/PodJEre

---

Google Chrome 96.0.4664.45 (正式版本) （64 位）
Microsoft Edge 110.0.1587.63 (正式版本) (64 位)

---

相关：font-size: 0

---

再次更新：不是本地打开file:///导致的，因为我在codepen右键"查看网页源代码"，复制到本地html里，再打开，会出现间隙空白。说明是codepen里的一些代码导致的

Answer 1

高度都是 88px 没有复现你说的间隙问题啊，另外你的 img 标签没有闭合。闭合之后再看看？

然后最好提供一下你的浏览器以及对应的版本。以及是否使用了一下插件 or 审查模式，因为我看到左侧有一段标尺。

---

加上 font-size: 0; 之后就变成了都是 84px：

---

看你反馈说codepen导致的，检查一下你的codepen的css配置，是否使用了resetcss或者normalizecss这种预设。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

是因为img标签是行内块元素, 是行内块元素有默认是基线对齐造成的, 解决方法是:

• 你将img设置为block, 这个问题就不存在了
• 修改img对齐方式 vertical-align: middle;

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入