如何消除img间的默认间隙
方案一:div{font-size:0};
方案二:img{ display:block};
方案三:img{vertical-align:top;}
方案四:div{ margin-bottom:-3px };
1.为什么img标签上下会有间隙?。
方案二:img{ display:block};
方案三:img{vertical-align:top;}
方案四:div{ margin-bottom:-3px };
1.为什么img标签上下会有间隙?。
根本原因在于img标签为inline元素,该元素默认垂直对齐方式为以父元素的baseline,但是展示时又是以bottomline为对齐方式,因此造成了上下两个img标签之间的间隙。
![](https://images2018.cnblogs.com/blog/1484146/201809/1484146-20180912153745459-859413526.png)
![](https://images2018.cnblogs.com/blog/1484146/201809/1484146-20180912153745459-859413526.png)
2.如何解决?
(1)img{ display:block};
将其改变为block元素,但是该方法太过粗暴,相当于从根本上改变了img。
(2)img{vertical-align:top;}
改变其垂直对齐方式
(3)div{font-size:0};
把父元素的文字大小设置为0
(4)div{ margin-bottom:-3px };
这个方法不推荐
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步