display:inline-block元素之间空隙

display:inline-block结合了display:block和display:inline，既可以自由设置宽高，又可以与文字图片混排，可内嵌block属性元素，也可置身于inline水平的元素中。

在css布局中，如果我们想要元素在一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是这些同行显示的inline-block元素经常有一定的间隙，为什么呢？这就是“换行符/空格间隙问题”，元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

Copy
<html>
<head>
  <title>display:inline-block元素之间空隙的产生原因和解决办法</title>
  <style type="text/css">
    .parent .child {
      display: inline-block;
      background-color: #fdfd04;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">child1</div>
    <div class="child">child2</div>
  </div>
</body>