两个div空白字符的问题

例如在一个宽度1024px的盒子里，放一个80%左盒子和20%右盒子。代码如下：
（与bootstrap无关）

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

css如下：

 <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1024px;
            height: 200px;
            margin: 0 auto;
            background-color: gray;
            /*font-size: 0;*/
        }
        .container>div{
            display: inline-block;
        }
        .left {
            width: 80%;
            height: 100%;
            background-color: pink;
        }

        .right {
            width: 20%;
            height: 100%;
            background-color: #cccc00;
        }
    </style>

首先想在一行放两个盒子，需要display 行内块级元素才行。但是这样其实两个盒子并不能在一行如图

其中粉色左盒子，黄色右盒子，背景灰色为container背景。

---

引起这个问题的原因是两个div在编辑器里有空白字符，导致空白字符占据一定空隙。
解决方法是：
1、删除div间隙

<div class="left"></div><div class="right"></div>

但是治标不治本，因为编辑器自带格式化功能，导致会误格式化
2、常用解决办法
在父亲容器里加入 font-size: 0;清除空白字符，如果需要在子盒子写字的话，子盒子加入具体 font-size: 具体px;即可

 .container {
            width: 1024px;
            height: 200px;
            margin: 0 auto;
            background-color: gray;
            font-size: 0;
        }

最终效果