|
阅读：7013回复：0
display:inline-block互相排列会存在间隙问题
如下代码：
<style type="text/css"> *{margin:0; padding:0;} .test{width:600px; border:1px blue solid;} .test div{width:100px; height:100px; display:inline-block;background:blue;} </style> </head> <body> <div class="test"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> 效果如下：  存在间隙的原因：西文排版的原因导致inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间 行内块级元素之间会存在间隙，解决间隙方法： 1、改变书写结构，也就是把HTML空格全部去掉，间距也就消失了。 <li>item1</li><!-- --><li>item2</li><!-- --><li>item3</li><!-- --><li>item4</li><!-- --><li>item5</li> 2、font-size 将父容器的大小设置为font-size:0; 3、使用margn负值 4、使用word-spacing或者letter-spacing 一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。letter-spacing子元素要设置letter-spacing为0，不然会继承父元素的值；使用word-spacing时，只需设置父元素word-spacing为合适值即可。 参考链接：https://www.jianshu.com/p/b6fb427308ad |
|
公众号
