关于设置display:inline-block，使两个div产生空隙的解决方法

<div class="top"></div>
<div class="middle">
    <div class="left" style="display: inline-block; width: 20%; height: 100px;"></div>
    <div class="right" style="display: inline-block; width: 80%; height: 100px;"></div>
</div>
<div class="foot"></div>

css相关略；

当页面布局为上中（左+右）下布局时，为了使中间部分的左右布局并排显示，且避免使用float。

设置并排的左右div的css样式为 display: inline-block时，布局的div之间会出现一些空隙，且设置 margin: 0; padding: 0;也无法消除时；

可以为他们的父标签此例中为 middle 的属性添加 font-size: 0;

来解决此问题

借鉴相关文章：

html - How to remove the space between inline-block elements?