行内块元素缝隙解决方案

html（5）行内块元素缝隙解决方案

1. 为父元素设置设置font-size：0
   注意子元素要重新设置font-size style=“font-size: 0;”

<style>
   .div1{
            display: inline-block;
            background-color: #e1f2fb;
            width: 500px;
            height: 500px;
        }
    .div2{
            display: inline-block;
            background-color: #f3dfe3;
            width: 500px;
            height: 500px;
            }
  </style>
    <div class="contaier" style="font-size: 0;">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>

2. 不要加空格或换行

<div class="span-wrap">
    <span>行内元素</span><span>行内元素</span><input type="text" value="行内块元素">

3. 右边的盒子加margin-left

<div class="div2" style="margin-left:-5px"></div>