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;' >.

Previous: Segment error occurred in CPP submission

Next: Django project running error Apps aren't loaded yet

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu