inline-block会引起元素和元素之间几个像素的间隙（具体间隙大小取决于字体大小）。造成空白间隙的原因是在标签和标签之间使用了空格或换行符。因为空白字符，也是字符也会引用CSS样式
对于<div>标签：
代码如下：
<div class="left">
<div class="one"></div>
<div class="tow"></div>
</div>
.left{
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #4cae4c;
}
.one{
width: 30px;
height: 30px;
background-color:red;
display: inline-block;
}
.tow{
width: 30px;
height: 30px;
background-color:black;
}
效果如下：
解决方法1：设置父元素的font-size为0，在子元素重新设置字体大小。
.left{
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #4cae4c;
font-size: 0;
}
.one{
width: 30px;
height: 30px;
background-color:red;
display: inline-block;
}
.tow{
width: 30px;
height: 30px;
background-color:black;
}
解决办法2： 利用负margin-bottom/top/left/right（不推荐，具体负margin多少取决于字体的大小）
.left{
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #4cae4c;
}
.one{
width: 30px;
height: 30px;
background-color:red;
display: inline-block;
margin-bottom: -4px;
}
.tow{
width: 30px;
height: 30px;
background-color:black;
}
或者
.one{
width: 30px;
height: 30px;
background-color:red;
display: inline-block;
}
.tow{
width: 30px;
height: 30px;
background-color:black;
margin-top: -4px;
}
解决方法3：在设置display：inline-block的div里面写入任意的文字
.left{
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #4cae4c;
}
.one{
width: 30px;
height: 30px;
background-color:red;
display: inline-block;
}
.tow{
width: 30px;
height: 30px;
background-color:blueviolet;
}
<div class="left">
<div class="one">1</div>
<div class="tow"></div>
</div>
但是如果只给没有设置display：inline-block的div加文字，会没有效果。
对于<span>或者<ul><li>标签：
<div class="left">
<span class="one">我是1</span>
<span class="tow">我是2</span>
</div>
.left{
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #4cae4c;
}
.one{
width: 30px;
height: 30px;
background-color:red;
}
.tow{
width: 30px;
height: 30px;
background-color:blueviolet;
}
解决方法1：移除标签间的空格
写法1：
<div class="left">
<span class="one">我是1</span><span class="tow">我是2</span>
</div>
写法2：
<div class="left">
<span class="one">我是1
</span><span class="tow">我是2</span>
</div>
写法3：利用HTML注释标签
<div class="left">
<span class="one">我是1</span><!--
--><span class="tow">我是2</span>
</div>
仔细看的话第一种和第二种方法之间还有差别！
解决方法2：取消标签闭合
把span标签的结束标签去掉，这样间隙就没有了。但是为了兼容IE6/IE7，最后一个标签需要闭合。
<div class="left">
<span class="one">我是1
<span class="tow">我是2</span>
</div>
解决方法3：letter-spacing（字符边距）为负值 or word-spacing（单词边距） 负值
给父级元素加上
.left{
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #4cae4c;
word-spacing: -5px;
}
.one{
width: 30px;
height: 30px;
background-color:red;
}
.tow{
width: 30px;
height: 30px;
background-color:blueviolet;
}
