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

Posted xingorg1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css - 三种方法解决LI和内部Img的上下间距问题相关的知识,希望对你有一定的参考价值。

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


在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图:

css

img的高度是190*127

但是放到li中,li并没有设置高度,却和内部的图片之间上下错位。

若强行给li设置高度127,他和img依旧不能重合。虽然肉眼看不出来。

css

解决这个问题有如下三种方法:

一、设置li的font-size:0;

如果你很幸运,布局中li里边不需要放文字的话,那么就可以这么用了。

 

二、设置img的vertical-align:去掉集成的样式或者覆盖设置为top

在我这里出现这个问题,是因为img继承了公用样式,其vertical-align:middle;

css

我发现后将其关掉,就没有问题了。

为了后期也不会出现这个问题,最好单独再设置一个vertical-align:middle;来覆盖掉。

 

三、设置img的display:block;

 这个也是一劳永逸的方法,毕竟设置了block,img还是会随父元素的宽度自适应(如果你的页面需要响应的话)。

 

完美~

 css

2017-07-06  11:05:20

 

 

 

 

 

 

 

 

 

越努力,越幸运;阿门。

以上是关于css - 三种方法解决LI和内部Img的上下间距问题的主要内容,如果未能解决你的问题,请参考以下文章

解决图片间间距的几种方法

css 田字布局,子元素之间,子元素和父元素之间间距10,自适应

解决img标签上下出现间隙的方法

img,span去除诡异的边距

HTML CSS表格如何控制上下间距

解决img在a标签中存在下间距问题