首页 > 代码库 > div和img之间的缝隙问题
div和img之间的缝隙问题
这次做的项目,客户说。banner图的上下之间不要留有空隙,细致一看才发现,上下居然都有空隙。审查元素,发现全部的div,img的padding和margin都是0,对于这个间隙到底是假设产生的真的是找不到原因。
网上查了一下,类似的问题还蛮多的。
解决方法基本是四种:
1.将img设置为block;
这个基本能够解决img和div下方的缝隙问题。
2.设置img的竖直对齐方式
v-align:bottom;
3.设置父div的font-size:0
4.设置外层的div的line-height:0
推荐使用第一种方式。
可是本次项目奇怪的地方在于上下皆有缝隙,開始时,上面的缝隙能够通过margin-top:-10px解决。可是后来改了代码结构后,此方式也不行。
网上找了非常多,亦没有解决方案。
因此採用定位的方式解决:
设置父元素的position为relative
子元素img的position为absolute;设置top为0,完美解决此问题。
为了避免影响其它布局,设置下div的高度为img的高度。
问题出现的原因依然没有找到,仅仅是攻克了这个问题。解决这个问题的方式有非常多。只是郁闷的是经常攻克了问题。却不知道为了是如何发生了,不利于日后写代码的过程中去避免这些问题。
div和img之间的缝隙问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。