大家应该都晓得，inline-block元素之间会有一定的间距，那么怎么去除这个间距呢？
我们先来看一下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding: 0; margin: 0;}
ul{list-style-type: none;}
li{
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
font-size: 40px;
text-align: center;
color: white;
background-color: purple;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>预览效果如下图：
通过上图我们可以发现inline-block元素之间是存在一定的间距的。
在实际的开发过程中，这种间距可能会对我们的布局产生影响。
大多数时候为了不影响布局，我们有必要去除此间距。
在CSS中，我们可以给父元素定义一个“font-size: 0;”来去除inline-block元素的间距。
上述代码只需要改动ul的css样式即可，如下：
ul{
list-style-type: none;
font-size: 0;
}改动好了之后再看，间距就没有了。
