css中行内元素和行内块元素空白间隙的问题

css行内元素和行内块元素间隙问题

在html代码中，如果把行内元素或者行内块元素写成下面这样的话，会出现空格的问题：

<div class="wrapper">
  <span>我是行内元素span>
  <span>我是行内元素span>
  <span>我是行内元素span>
div>

.wrapper span {
  /*display: inline-block;*//* 这句代码加不加效果都一致 */
  font-size: 16px;
  background-color: lime;
  color: #fff;
}

效果图：

我么可以看到，这里保留了一个空格，之所以出现先这个问题，来源在于：我们代码里面的这几个span标签都有换行，这些换行也叫作空文本节点，会被保留为一个空格，所以我们要去掉这个空文本节点带来的问题，解决方法如下：

1. 我最喜欢也是最常用的方法：
   给他们的父级元素加上font-size: 0;这个属性，就可以解决。原理是：空文本节点也是文本，自然可以被font-size: 0;作用到，那么空文本节点自然就没了。但是这种方法兼容性存在一定问题，在IE7及以下IE版本中不兼容，在safari浏览器中不兼容。
   代码如下：

   <div class="wrapper">
     <span>我是行内元素span>
     <span>我是行内元素span>
     <span>我是行内元素span>
   div>
   

   .wrapper {
     font-size: 0;/* 去掉空文本节点 */
   }
   
   .wrapper span {
     /*display: inline-block;*/
     font-size: 16px;
     background-color: lime;
     color: #fff;
   }
   

2. 取消代码换行
   这种方法非常直观，但是代码并不美观了。。。而且维护起来也不方便。但是兼容性好。

   <div class="wrapper">
     <span>我是行内元素span><span>我是行内元素span><span>我是行内元素span>
   div>
   

3. 还有其他的一些方法都类似于第二种方法，就是变相的取消换行（在这里我只说一个吧）：
   比如这样：

   <div class="wrapper">
     <span>我是行内元素span
     ><span>我是行内元素span
     ><span>我是行内元素span>
   div>