display:inline-block产生元素间空隙原理和解决方法

写轮播图时偶遇一个排版问题，用 inline-block 会产生无法通过 margin = 0 消除的空隙

原理#

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决方法#

1. 父级font-size设置为0，子元素font-size按照正常大小

   ul{
       white-space: nowrap;
       font-size: 0;
       /* 解决inlineblock导致的空格问题 */
   }
   
   li {
       display: inline-block;
   }
   

2. 子元素之间不回车，缺点是代码可读性变差

   <div class="parent">
     <div class="child">child1</div><div class="child">child2</div>
   </div>
   

参考文章：

display:inline-block元素之间空隙的产生原因和解决办法