display:inline-block解决文字有间隙问题

定义：display:inline-block是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内联元素的增强。

但是display:inline-block存在文字间隙问题

<div class="container">
      <div class="left">
          左
      </div>
      <div class="right">
          右
      </div>
  </div>
.container{
  width:800px;
  height:200px;
}
.left
  {
    background:red;
    dispaly:inline-block;
    width:200px;
    height:200px;
  }
.right
  {
    background:red;
    dispaly:inline-block;
    width:600px;
    height:200px;
  }

解决办法：

父元素font-size=0 ，再向两个子元素分别设置font-size

.container{
           width:800px;
           height:200px;
           font-size:0;
       }
       .left{
           font-size:14px;
           background:red;
           display: inline-block;
           width:200px;
           height:200px;
       }
       .right{
           font-size:14px;
           background:blue;
           display: inline-block;
           width:600px;
           height:200px;
       }