css中这种现象是什么原因

Question

在写练习的时候，突然发现了这个问题

代码如下

<div style="width: 70px; height: 70px;">
    <img src="../img/title.png" alt="" style="width: 100%; height: 100%;">
</div>

我最先感觉可能由于img是行内元素导致的，于是删了html元素间的空格，发现没有卵用。。。

<div style="width: 70px; height: 70px;"><img src="../img/title.png" alt="" style="width: 100%; height: 100%;"></div>

之后我把img加了display:block;就可以正常显示了

所以说div里的那块空白部分是怎么产生的

Answer 1

给图片添加verticle-align属性应该就可以了

具体原理可以看看这篇文章

https://www.zhangxinxu.com/wo...

Answer 2

整体代码贴下，否则没法看明白

Answer 3

我肿么感觉像是你到png顶部有透明区域导致到呢。。。

Answer 4

img 默认是内联元素 就会有行高与对齐的问题, 加个 'verticle-align:top;' 就好了