div之间有间隙以及img和div之间有间隙的原因及解决方法
原因:
div 中 存在 img标签,由于img标签的 display:inline-block 属性。
display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一 行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行 符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。
解决方法:
1、把img标签的display属性改成block:
img{dispaly:block;}
2、把div中的字体大小设为0:
div{font-size:0;}
3、修改img的vertical-align属性:
img{vertical-align:buttom;} img{vertical-align:middle;} img{vertical-align:top;}
个人能力有限(* *),欢迎指正、交流。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步