為什麼兩個寬度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

   。