为什么两个宽度50%、inline-block的div层无法并行显示——空白折叠

今天写一个很简单的“品”字布局，发现了一个坑：

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

CSS
	.up {
            width: 100%;
            background-color: whitesmoke;
            height: 100px;
        }
        .left {
            width: 50%;
            height: 100px;
            background-color: whitesmoke;
            display: inline-block;
        }
        .right {
            width: 50%;
            height: 100px;
            display: inline-block;
            background-color: gainsboro;
        }

这样子，页面上的left和right两个div是不会并排显示的，原因是

在编辑器里格式化代码两个div之间存在回车换行符，这个换行符被解析到HTML里了。

解决的方法是

1. 把换行去掉，让两个div连着打。
2. 在父元素设置font-size：0,这个方法有副作用，子元素需要声明font-size。