重庆小猴建站工作室:专业企业网站网站美工、网站设计、SEO优化、网站运营等服务。QQ:570521548服务中心 | 建站流程 | 网站地图

CSS使用display:inline-block消除间隙的方法

2020-06-19小猴建站 阅读()相关主题:CSS

重庆做网站布局的时候,经常需要把块级元素改成行间元素,使用方法如下:

span{display:block;} /*多用于行间元素切换为块级元素*/
div{display:inline;} /*多用于块级元素切换为行间元素,行间元素的margin、height、width属性失效*/
div{display:inline-block;} /*仍可使用块级元素的属性*/

inline-block是让元素在一行显示,但是这些元素在html里面是上下行排列的,所以中间有换行符,于是并排显示就有了换行符带来的空隙,解决办法如下:

方案一:将html标签要 display:inline-block 的元素写在一行。

方案二:给元素设置 float:left,再清除浮动。

方案三:给父元素设置 font-size:0,子元素需要设置如:font-size:10px。

方案四:设置父元素 display:table;word-spacing:-1em; 目前这个方法可以完美解决,且兼容其他浏览器。

吖七推荐后两种方法,第四种方法需要记忆的东西较多,初学者用第三种即可。