为什么img标签会有间隙
img标签的display属性的默认值是inline，但是它的默认分辨率是由被嵌入的图片等原始宽高来确定的，使得它就像inline-block一样。
<img>没有基线（baseline），这意味着，当在一个行内格式的上下文中使用vertical-align: baseline时，图像的底部将会与容器的文字基线对齐。
因此，可以将图片理解为带有line-height行高的空文字，上下间隙就是半行距。
左右间隙理解：内联元素换行或空格写，都会有间隙。
下面看一下，未经处理带有间隙的图片：
谷歌Google
消除上下间隙
设置img为块元素
|
1 2 3 4 5 6 7 8 9 10 |
<div class="img-box img-box1"> 谷歌Google <img src="lufei.png"> <img src="lufei.png"> </div> <style> .img-box1 img{ display: block; } </style> |
谷歌Google
更改img对齐方式
|
1 2 3 4 5 6 7 8 9 10 |
<div class="img-box img-box2"> 谷歌Google <img src="lufei.png"> <img src="lufei.png"> </div> <style> .img-box2 img{ vertical-align: bottom; } </style> |
谷歌Google
将外层行高设为0
|
1 2 3 4 5 6 7 8 9 10 |
<div class="img-box img-box3"> 谷歌Google <img src="lufei.png"> <img src="lufei.png"> </div> <style> .img-box3{ line-height: 0; } </style> |
谷歌Google
将外层字体大小设为0
|
1 2 3 4 5 6 7 8 9 10 |
<div class="img-box img-box4"> 谷歌Google <img src="lufei.png"> <img src="lufei.png"> </div> <style> .img-box4{ font-size: 0; } </style> |
谷歌Google
消除左右间隙
设置letter-spacing
|
1 2 3 4 5 6 7 8 9 |
<div class="img-box img-box5"> <img src="lufie.png"> <img src="lufei.png"> </div> <style> .img-box5{ letter-spacing: -100px; } </style> |
多个img间不设空格和换行
|
1 2 3 |
<div class="img-box img-box6"> 谷歌Google<img src="https://www.itcan.cn/wp-content/uploads/2022/04/lufei-e1649516372164.png"><img src="https://www.itcan.cn/wp-content/uploads/2022/04/lufei-e1649516372164.png"> </div> |
谷歌Google
使用float浮动
|
1 2 3 4 5 6 7 8 9 10 |
<div class="img-box img-box7"> 谷歌Google <img src="lufei.png"> <img src="lufei.png"> </div> <style> .img-box7 img{ float: left; } </style> |
谷歌Google
参考
<img>：图像嵌入元素：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
内联元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
解决img标签上下出现间隙的方法：http://www.cppcns.com/web/html5/6709.html
两个img之间为什么会有空隙及解决方法：https://blog.csdn.net/weixin_43599212/article/details/107584461
img标签之间的间距问题原理：https://segmentfault.com/a/1190000021318427
