行内块的坑（空白间隙）

一、去除元素间的空白

通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行，可以去除元素间的空白，或者将两个inline-block元素间加上空白注释，或者不写元素的闭合标签等，例如这么写：

1 2 3 4 5 6 7 8 9 10 11

<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，子元素单独再设置字体大小

如下所示：

 

1 2 3 4 5 6

.layout.inline-block .left-center-right {     font-size: 0; } .layout.inline-block .left-center-right>div {     font-size: 16px; }

 

三、设置margin-right为负值

用margin负值来抵掉元素间的空白，不过margin负值的大小与上下文的字体和文字大小相关，并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用，也相对比较麻烦，因此不太推荐使用。

四、给inline-block元素加float或者flex

让行内块元素浮动起来，或者给父盒子加上display: flex; 都可以解决空白间隙的问题，不过这样处理的三栏式布局也就没必要用inline-block啦。

五、设置字符间距或单词间距

这两个方法的原理有点像二所用的font-size，具体做法是给父元素一个letter-spacing或者word-spacing的负值，子元素再调整为0即可，具体使用字符间距还是单词间距其实大同小异。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* letter-spacing */ .layout .left-center-right{      letter-spacing: -0.5em; } .layout .left-center-right>div{      letter-spacing: 0; }   /* word-spacing */   .layout .left-center-right{      word-spacing: -0.5em; } .layout .left-center-right>div{      word-spacing: 0; }

emmm方法都列举得差不多啦，根据这些方法试试，就能得到想要的效果啦

转载于:https://www.cnblogs.com/gao04/p/11095624.html