display:inline-block是讓元素在一行顯示，但是這些元素在html里面是上下行排列的，所以中間有換行符，於是並排顯示就有了換行符帶來的空隙。
解決方案：
1.將html標簽要display:inline-block 的元素寫在一行。缺點：代碼可讀性差。
<style>
.spa{
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="spa">wade</div><div class="spa">james</div><div class="spa">rose</div>
</body>
2.給父元素設置font-size:0,給子元素設置需要的font-size值
缺點:是子元素如果里面有文字，文字會消失不見，所以又要給子元素設置font-size,增加了代碼量。
<style>
.box{
font-size: 0;
}
.spa{
display: inline-block;
font-size: 16px;
width: 100px;
font-size: 16px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="box">
<div class="spa">wade</div>
<div class="spa">james</div>
<div class="spa">rose</div>
</div>
</body>
3.給元素設置float:left,
缺點:高度塌陷，要清楚浮動。
<style>
.spa{
display: inline-block;
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.box::after{
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="box">
<div class="spa">wade</div>
<div class="spa">james</div>
<div class="spa lastspa">rose</div>
</div>
</body>
4.設置子元素的margin-left為負值，但是元素之間的間隙大小是根據上下文的字體大小確定的，而每個瀏覽器的換行空隙大小不同，所以這個方法不通用。
<style>
.spa{
display: inline-block;
margin-left: -5px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="box">
<div class="spa">wade</div>
<div class="spa">james</div>
<div class="spa lastspa">rose</div>
</div>
</body>
5.設置父元素 display:table;word-spacing:-1em;目前這個方法可以完美解決，且兼容其他瀏覽器。
<style>
.box{
display:table;
word-spacing:-1em;
}
.spa{
display: inline-block;
width: 100px;
font-size: 16px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="box">
<div class="spa">wade</div>
<div class="spa">james</div>
<div class="spa lastspa">rose</div>
</div>
</body>