html+css如何删除行内元素之间的空白/空隙

html和css如下：

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

span { 
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

效果如下：

SPAN元素之间将会有一个4px宽度的空白。

如何解决呢？

首先我们需要分析出现这种问题的原因在哪里。

因为span是行内元素，这意味着就和一个字符一样,而不管两个字符相距多远,对于浏览器来说只会解析为一个空格, 比如上述代码,换了一行,也算是一个空格,那一段空白就是这么来的.

知道了原因，那么解决的方法就有了。

第一种方法：

将两个span元素放在同一行，不要换行。如：

<p>
    <span>Foo</span><span>Bar</span>
</p>

第二种方法：

将p元素的font-size设置为0，然后将span的font-szie设置为指定像素。如：

span { 
    display:inline-block;
    width:100px;
    background-color:palevioletred;
    font-size:14px;
}
p{
    font-size:0px;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

第三种方法：

使用display: table;和display: table-cell;属性代替display: inline-block;

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

第四种方法：

在p元素上加上display: flex属性

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

 
虽然这些方案都不是很理想,但是如果不这样处理，那你的HTML代码结构可能就非常混乱，成为标准的垃圾代码。 

因为行内元素非常好用,所以这并不是一个小心避免的雷区,作为开发人员,学会处理这种空白问题也是很重要的 。