行内块元素在同一行显示会有默认空隙
原因:元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。
解决方法:
一、去除元素间的空白
通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行,可以去除元素间的空白,或者将两个inline-block元素间加上空白注释,或者不写元素的闭合标签等
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
<!-- or -->
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
二、父元素设置font-size为0,子元素单独再设置字体大小
.container{
font-size: 0;
}
.item{
font-size: 16px;
}
/*对于Chrome, 其默认有最小字体大小限制,考虑到兼容性,需要取消字体大小限制,*/
.container{
font-size: 0;
-webkit-text-size-adjust:none;
}