HTML解决div里面img的缝隙问题

图片IMG与容器下边界之间有空隙怎么办？这里介绍3中简单的解决方法。

　　第一，给图片img标签display:block。

　　img{display:block}

　　第二，定义容器里的字体大小为0。

　　div {

　　width:110px;

　　border:1px solid #000000;

　　font-size:0

　　}

　　第三，定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top

　　img{vertical-align:bottom}

　　其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。

　　造成图片在IE下与容器下边界有空隙的原因

　　在网上搜了一下，发现old9说的

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

　　至于这里的HTML属性align=”center”（对于图片浏览器会处理成align=”middle”），就相当于vertical-align:middle; 所以道理也是一样的，只要vertical-align不取baseline，这个空隙就消失了。

　　相关评论

　　1.ie的显示有几种模式，在html文档的开始部分声明<!DOCTYPE &hell;ip;.>

　　假如声明为strict模式，ie以w3c的方式显示文档，而w3c的标准里面<img />默认是一个inline的标签，除非自己显式的声明为 block

　　2.那个空隙是ie针对盒模型默认的line-height和font-size. 给img desplay:block;虽然能解决问题,但没从结构上来考虑.可谓治标不治本

转载于:https://www.cnblogs.com/GaoAnLee/p/5230150.html

HTML解决div里面img的缝隙问题相关推荐

html页面右侧有缝隙,HTML解决div里面img的缝隙问题
图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...
两个div上下之间有缝隙
两个div上下之间有缝隙,如何解决? 在项目中,总会遇到一些BUG. HTML <div class="case1"><img src="text.jp ...
纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
四种方法解决DIV高度自适应问题
四种方法解决DIV高度自适应问题参考文章: (1)四种方法解决DIV高度自适应问题 (2)https://www.cnblogs.com/smght/p/4505614.html 备忘一下.
小技巧助你解决div+css网页内容显示不完整
今天调一个布局,调了老一会没调好,就是内容显示不全,然后突然看到这篇文章得到点启发,所以转发下支持下在测试网页效果时,你是否为网页在IE6版本的浏览器中能正常打开,网页显示完整.而在IE7及以上版 ...
html tab focus,tabindex解决div获得焦点focus()和失去焦点blur()的问题
tabindex解决div获得焦点focus()和失去焦点blur()的问题首先要说的是,默认情况下div标签是没有获得焦点focus()和失去焦点blur()两个事件的. 如果想要div可以拥有获 ...
html的div的间隙,解决DIV浮动间隙
1.解决DIV浮动双倍间距加属性display:inline; 2.Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug Container: paddin ...
解决div用了position: fixed后滚动条显示不完整的问题
解决div用了position: fixed后滚动条显示不完整的问题参考文章: (1)解决div用了position: fixed后滚动条显示不完整的问题 (2)https://www.cnblog ...
js解决div移动卡顿问题
设置定时器,解决div刚开始移动卡顿问题: 详细代码: <!DOCTYPE html> <html lang="en"><head><me ...

HTML解决div里面img的缝隙问题

HTML解决div里面img的缝隙问题相关推荐

最新文章

热门文章