欢迎来到覃师宁博客!
帝国cms使用手册

如何解决display:inline-block内联块元素间隙的问题

编辑:覃师宁来源:qinshining.com时间:2020-12-22 17:01:56阅读量:

解决display:inline-block内联块元素间隙问题,首先要弄清楚display:inline-block属性的含义,以及产生间隙的原因

什么是display:inline-block属性

display:inline-block是将内容作为块对象呈递,以内联块元素显示

display:inline-block内联块元素特点

1、支持全部css样式

2、如果没有设置宽高,宽高由内容决定。

3、不会独占一行,相邻的内联元素会排在同一行

4、代码换行,盒子会产生间距

5、子元素是内联块元素,父元素可以用 text - align 属性设置子元素水平对齐方式。

display:inline-block;产生间隙的原因(4px)

内联元素设置display:inline-block导致换行或空格会占据一定的位置,从而产生间隙,大约4个像素

解决办法:

方法一(不推荐):在html代码中除去当前元素的空格或换行,不推荐,影响代码美观以及后期维护

方法二(不推荐):当前内联元素的父元素中设置font-size:0;缺点在chorme中不支持,但是可以设置

方法三(推荐):当前内联元素的父元素中设置letter-spaceing:-4px;控制文字间的水平距离,可以让文字水平方向上重叠,这样就抵消了空格或换行的占位。

display:inline-block;在IE6/7中不兼容的解决办法

div { display:inline-block; _zoom:1;_display:inline;}

div { display:inline-block; *zoom:1;*display:inline;}

很赞哦!(

相关文章

更多回答

发表评论共有条评论
用户名:密码:
验证码:匿名发表
网创邦微信公众号