我們在使用給li標簽添加diaplay:inline-block屬性后，li標簽並排顯示后之間會產生3px的間距。
<style>
ul,li{
margin: 0;
padding: 0;
}
li{
display: inline-block;
width: 50px;
height:50px;
background: black;
list-style:none;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
間距是如何產生的？
<li>標簽我們在書寫的時候為了代碼的簡潔直觀會換行，但是瀏覽器在解析的時候會把這個換行解析成一個字符。
當我們不使用換行時，就不會有間距了。
<ul>
<li></li><li></li><li></li><li></li>
</ul>
怎么解決這個問題呢？
1、像上面說的標簽不換行；
2、<li>標簽左間距設置-3px；
3、<li>標簽不閉合，瀏覽器會自動添加閉合，就不會有換行了。