对于在div或ul li 中加入图片有各种空隙的小研究

本文探讨了在网页布局中遇到的意外空隙问题,详细解释了其成因并提供了两种有效的解决方案。通过调整vertical-align属性和设置font-size为0,可以消除这些空隙,确保网页布局的一致性和美观。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

其实,在正常规范代码的情况下,很少会有空隙的出现。但是即使你初始化了margin和padding,在div中加了一个图片,下面还会有那么3~5px的空隙,这是为什么?
这里写图片描述
首先,这种情况时,你没有规定div的高度height(如果你加了的高度和图片高度一致,就不用往下看了。。。。),那么浏览器就会自己算出高度,并出现了这个空隙。。
这就关系到baseline的问题了,不过这个问题我也有点蒙,等以后彻底明白了再更新,说一下各种解决方法:
1:vertical-align: bottom为img设置这个,vertical-align 属性设置元素的垂直对齐方式。
2:有一种原因,是空格回车等text造成的,解决方法:回车空格不过就是个字符,只不过我们看不见,那么把font-size设置为0,就ok了。
这里写图片描述
推荐方法2,这个方法还可以解决li display:inline后,有空隙的问题。
总之,遇到有了不该出现的空隙,就想想是不是有了看不见的空格,加font-size:0;试试~~~~
欢迎评论交流。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值