使用display:inline-block；佈局時，如果遇到換行/空格符等其他字符時，會有出現空白間隙；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>inline-block空白間隙</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>
</html>
ul{
display: block;
width: 900px;
margin:100px auto;
}
li{
display: inline-block;
width: 100px;
height: 100px;
background: yellow;
font-size: 24px;
color:#000;
}
原因：
空格符本質上就是個字符，與a,b,c,d這些字符是個同一個屬性的東西，只是他是空格，透明的看不見而已（但可以選中）；
解決：
ul{
font-size: 0;
letter-spacing: -3px;
}
