锐客网

  1. 首页 > 睿知 > it技术 > >

css - 三种方法解决LI和内部Img的上下间距问题

IT知识解决问题

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述css - 三种方法解决LI和内部Img的上下间距问题相关的知识，希望能为你提供帮助。
【css - 三种方法解决LI和内部Img的上下间距问题】三种方法解决LI和内部Img的上下间距问题



在火狐浏览器和谷歌浏览器（qq浏览器，谷歌内核）bug类似这张图：

img的高度是190*127
但是放到li中，li并没有设置高度，却和内部的图片之间上下错位。
若强行给li设置高度127，他和img依旧不能重合。虽然肉眼看不出来。

解决这个问题有如下三种方法：
一、设置li的font-size：0；如果你很幸运，布局中li里边不需要放文字的话，那么就可以这么用了。
 
二、设置img的vertical-align：去掉集成的样式或者覆盖设置为top在我这里出现这个问题，是因为img继承了公用样式，其vertical-align：middle；

我发现后将其关掉，就没有问题了。
为了后期也不会出现这个问题，最好单独再设置一个vertical-align：middle；来覆盖掉。
 
三、设置img的display：block；  这个也是一劳永逸的方法，毕竟设置了block，img还是会随父元素的宽度自适应（如果你的页面需要响应的话）。
 
完美~
 
2017-07-06   11:05:20
 
 
 
 
 
 
 
 
 
越努力，越幸运；阿门。


    推荐阅读


    上一篇：LVMLogical Volume Manager(逻辑卷管理)

    下一篇：jade(pug)学习笔记（待填充.......）