CSS使用display:inline-block消除间隙的方法
重庆做网站布局的时候,经常需要把块级元素改成行间元素,使用方法如下:
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; 目前这个方法可以完美解决,且兼容其他浏览器。
吖七推荐后两种方法,第四种方法需要记忆的东西较多,初学者用第三种即可。