CSS中消除display：inline-block的间隙的方法

1.可以两个标签紧贴，不让其出现空白字符

样式：

.left,.right{

    display:inline-block;

    width:100px;

    height:100px;

    border:1px solid red;

  }

结构：

<div class='wrapper'>
    <div class='left'>左边</div><div class='right'>右边</div>
</div>

blog1.png

2.给其父元素设置font-size：0，因为font-size可继承，所以子元素的字体消失，因此，需重新给子元素设置font-size
样式

.wrapper{

    font-size:0;

  }

left,.right{

    display:inline-block;

    width:100px;

    height:100px;

    border:1px solid red;

    font-size:16px;

  }

结构：

<div class='wrapper'>
    <div class='left'>左边</div>
    <div class='right'>右边</div>
 </div>

Z)IHM)O~E4DQGPIU@0GDBCB.png

补充：亦可用float属性，此时不会有间隙