首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >三种方法解决LI和内部Img的上下间距问题

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

作者头像
xing.org1^
发布2018-05-17 16:10:26
1K0
发布2018-05-17 16:10:26
举报
文章被收录于专栏:前端说吧前端说吧

在火狐浏览器和谷歌浏览器(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 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、设置li的font-size:0;
  • 二、设置img的vertical-align:去掉集成的样式或者覆盖设置为top
  • 三、设置img的display:block;
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档