图片img与div容器下有间隔的解决方法

安心晓希

安心晓希

2016-02-19 15:15

今天图老师小编给大家介绍下图片img与div容器下有间隔的解决方法,平时喜欢图片img与div容器下有间隔的解决方法的朋友赶紧收藏起来吧!记得点赞哦~

问题描述:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

IE7下 img与div(block类型元素)下边界有距离(或者叫缝隙、空隙)。

IE7才会有这个问题,IE8下是没有的。

解决方案:

法宝一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。

img{vertical-align:bottom;}

法宝二:定义容器里的字体大小为0。

div {
width:110px;
border:1px solid #000000;
font-size:0
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

据说原因:

图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

展开更多 50%)
分享

猜你喜欢

图片img与div容器下有间隔的解决方法

Web开发
图片img与div容器下有间隔的解决方法

DIV下图片自适应解决方法

Web开发
DIV下图片自适应解决方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

DIV居中的绝好解决方法

Web开发
DIV居中的绝好解决方法

IE6图片img下出现多余空白的解决方法

Web开发
IE6图片img下出现多余空白的解决方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

不能上传图片的解决方法

计算机应用技术
不能上传图片的解决方法

求得div 下 img的src地址的js代码

Web开发
求得div 下 img的src地址的js代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

API之打印函数

API之打印函数

win10新功能介绍

win10新功能介绍
下拉加载更多内容 ↓