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。
<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>
解决方法
1.代码都写在一行
2.在父元素中设置font-size:0，在子元素上重置正确的font-size
3.使用display：block，再float一下
4.在父元素中使用letter-spacing属性，设负值,，在子元素上重置正确的letter-spacing
