解析 -> 父div里两个子div(inline-block)两个子div中间会有小缝隙

1、为什么会有空隙嘞？

因为块级元素会换行，.html中的换行符、空格符、制表符等合并为空白符，所以换行符会占据宽度，产生间隙。

2、怎么消除因为inline-block产生的间隙呢？

给父元素设置word-spacing为负值，或者给父元素添加font-size：0.（在子元素没有文字的情况下，如果子元素有文字，则给子元素单独加上字体大小font-size）

<div class="main">
    <div>我们</div>
    <div>相连</div>
</div>

第一种解决方案：

.main {
  width:100%;
  word-spacing:-1em;
}
.main div {
  display:inline-block;
  background: orange;
}

第二种解决方案：

.main {
  width:100%;
  font-size: 0px;
}
.main div {
  display:inline-block;
  background: orange;
  font-size: 14px;
}

或者第三种解决方案：

css不用改，直接去掉html的换行

<div class="main">
   <div>我们</div><div>相连</div>
</div>