两个行内块元素同行显示时，会出现3px空白间隙，如何解决？

先上代码看问题

<div class="father">
  <span class="son1">哈哈哈哈哈</span>
  <span class="son2">哦哦哦哦哦</span>
</div>

 .son1 {
   background-color: #bfa;
   display: inline-block;
 }
 .son2 {
   background-color: pink;
   display: inline-block;
 }

解决方法1

1. 父元素设置：font-size: 0;
2. 子元素重新设置字体大小：font-size: 16px;

.father {
 font-size: 0;
}
.son1 {
  font-size: 16px;
  display: inline-block;
  background-color: #bfa;
}
.son2 {
  font-size: 16px;
  display: inline-block;
  background-color: pink;
}

问题解决：

解决方法2

直接将两个行内块写在一行上

<div class="father">
  <span class="son1">哈哈哈哈哈</span><span class="son2">哦哦哦哦哦</span>
</div>

这样问题也可解决