在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示对的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙。
元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。
解决方法:
1、删去元素之间的空白
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
<!-- or -->
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
<!-- or -->
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
2、 在父元素中设置font-size: 0,然后在子元素上重置正确的font-size。
缺点:inline-block元素必须设定字体,不然行内元素中的字体不不显示。
3、使用margin-right负值
缺点:元素之间间距的大小与上下文字体大小相关;并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的,因此这个方法不通用。
注意:当marigin-right使用相对单位em来表示时,Chrome下可以正常去除间距,而Firefox下元素之间有重叠。
4、为inline-block元素添加样式float:left
5、使用display:table和word-spacing(最优的方法)
.box{
display:table; /* 调教webkit*/
word-spacing:-1em;/*其他浏览器*/
}
6、使用letter-spacing
优点:因为使用了letter-spacing相对单位em表示距离,所以不需要根据字体大小改变代码来去除元素间距。
.box{
letter-spacing: -0.5em;
}
.box div{
letter-spacing: 0;
}
7、使用word-spacing
优点:因为使用了word-spacing相对单位em表示距离,所以不需要根据字体大小改变代码来去除元素间距。
.box{
word-spacing: -0.5em;
}