Display:inline-block元素之间产生空隙的解决方法

方法一：解决元素之间的空白符

<div class="parent">
  <!-- 子元素写在同一行 -->
  <div class="child">child1</div><div class="child">child2</div>
</div> 

 

方法二：父元素设置font-size:0,子元素重设font-size

<div class="parent" style="font-size: 0;">
    <div class="child" style="font-size: 16px;">child1</div>
    <div class="child" style="font-size: 16px;">child2</div>
</div>

方法三：子元素设置float:left

.child {
    display: inline-block;
    background-color: yellow;
    color: black;
    float: left;
}

<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2</div>
</div>