欢迎访问覃师宁博客!
帝国cms使用教程手册

覃师宁博客 覃师宁博客

qinshining.com

当前位置:覃师宁博客 > 网页制作

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

来源:qinshining.com 编辑:覃师宁 时间:2020-12-22

解决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;}/*推荐IE6*/

div { display:inline-block; *zoom:1;*display:inline;}/*推荐IE6或IE7*/

文章评论

人参与,共有条评论

为了响应国家网信办《网站要对跟帖评论审核管理规定》,网站评论将审核后发表