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

本文主要是介绍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>
   

这篇关于css中行内元素和行内块元素空白间隙的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---