把元素的display屬性值設置為inline或者inline-block秽荤，在該類元素連續(xù)出現(xiàn)的時候，你會發(fā)現(xiàn)每個元素之間會存在一些空隙涉枫。如下圖：
inline情況下.png
inline-block情況下.png
貼上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
font-size: 18px;
}
.wrap{
}
.wrap div{
width: 200px;
height: 200px;
color: white;
background-color: #42b983;
display: inline-block;
/*inline同理*/
}
</style>
</head>
<body>
<div class="wrap">
<div>這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
<div >這是一些文字</div>
</div>
</body>
</html>
導致這個問題的原因是：在HTML代碼里账锹，空格也會占位。class為wrap的元素繼承了body font-size:18px的這個屬性值稚虎。在非0的font-size值的情況下，間隙就會形成偎捎。解決該問題的方法有二：
- 壓縮HTML蠢终，把所有空格去掉
- 為class為wrap的元素設置font-size :0 (但需要把其子元素的該屬性重寫成正常值)
貼上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
font-size: 18px;
}
.wrap{
font-size: 0;
}
.wrap div{
width: 200px;
height: 200px;
color: white;
background-color: #42b983;
display: inline-block;
font-size: 18px;
/*inline同理*/
}
</style>
</head>
<body>
<div class="wrap">
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
<div>這是一些文字</div>
</div>
</body>
</html>
