display:inline-block的间隙问题和解决办法

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;
        }