What is the reason for this phenomenon in css?

when I was writing the exercise, I suddenly found this problem

the code is as follows

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

I first felt that img might be caused by inline elements, so I deleted the spaces between html elements and found that there was no egg use.

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

then I added display:block; to img so that it can be displayed normally

so how did the blank space in div come into being

Css
Apr.21,2022

paste down the whole code, otherwise you can't read


adding verticle-align attributes to the picture should be fine

specific principles can be found in this article

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


Why do I feel like you have a transparent area at the top of the png.


img defaults to inline elements, which will cause row height and alignment problems. Just add a 'verticle-align:top;' >.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b31c-2c2a1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b31c-2c2a1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?