一：原因
原因：
是因为html代码中相隔的标签间有回车，HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当元素font-size:16px时，间距为8px
二：解决方案
1、由于回车产生的间隙，去掉回车就好了。但是这样写在一行，代码可读性变低
2、为父元素中设置font-size: 0，在子元素上重置正确的font-size，子元素必须重置字体。
3、元素float：left，但是会有塌陷。
4、设置父元素，display:table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
background-color: silver;
}
</style>
</head>
<body>
<div class="app">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>运行：
可以看到每个span（行内显示）之间 有间隙
解决：
.app {
display: table;
}运行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
border: 2px solid red;
}
li {
display: inline-block;
height: 200px;
width: 50px;
background-color: pink;
vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>运行：
每个li的左右存在间隔
解决：
ul {
border: 2px solid red;
font-size: 0;
}运行：
