html图片上下排列中间有缝,div图片之间有缝隙,display:block

这两天在psd to div+css的过程中,发现IE系的浏览器有一个比较奇怪的问题,上下两个相邻的div之中存在3px的缝隙,具体的描述如下:

上面的div:里面有一张图片

下面的div:使用的是背景,纵轴重复

具体如图所示:

0818b9ca8b590ca3270a3433284dd417.png

经过google之后,找到的解决办法是,找到上面的div中的图片代码所在位置,为其设定属性style="display:block",问题解决。

display:block  意思是:让对象成为块级元素(比如a,span等)。

一般的块级元素诸如段落

、标题

...、列表

和BODY等元素。而内联元素则如: 表单元素、超级链接 、图像、 ........

块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

举例:以下这段代码分别为内联元素img与块级元素div,仅展示其差别:

Html代码

0818b9ca8b590ca3270a3433284dd417.png

以下为上述代码的效果:

0818b9ca8b590ca3270a3433284dd417.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值