div的空白字符问题

<div class="container">
    <div class="left" style="width:20%;height:200px;background:#ff0;"></div>
    <div class="right" style="width:80%;height:200px;background:#ffc;"></div>
</div>

此时给container下的div设置为行内块级元素

.container > div{
    display:inline-block;
}

此时会发现两个子div并未同行显示
若改为以下即可

<div class="container">
    <div class="left" style="width:20%;height:200px;background:#ff0;"></div><div class="right" style="width:80%;height:200px;background:#ff0;"></div>
</div>

原因是div换行出现的空白字符问题，但是这样的解决办法治标不治本，遇到自动格式化代码时照样被强制换行
此时大div的宽度应该是20%+一个font-size+80%
故给container加属性

.container{
    font-size:0;
}

子div的字体大小再按需重新设置即可

注意：遇到有些hover时出现间隔跳变效果也许就是空白字符的问题