在包裹層里嵌套的兩個div設置display: inline-block時，正常情況下兩個div會並排顯示，如圖
代碼：
html:
<div id="box"> <div class="content1"></div> <div class="content2"></div> </div> css:
#box { width: 300px; height: 300px; border: 1px solid red; padding: 20px; margin: 50px; } .content1 { display: inline-block; width: 100px; height: 100px; border: 1px solid blue } .content2 { display: inline-block; width: 100px; height: 100px; border: 1px solid blue } 但是如果在其中一個div里面加上一些內容，神奇的事發生了，第一個div出現了下移，如圖：
image.png
這塊我只在html代碼加了p標簽
<div id="box"> <div class="content1"> <p>11111</p> </div> <div class="content2"></div> </div> 查閱了相關資料發現，在將元素display設置為inline-block的時候，元素即同時具有內聯元素和塊級元素的屬性，既排列在同一行又可以設置寬高。
對於內聯元素，都具有vertical-align屬性，那這里就牽涉到vertical-align的默認對齊方式。 它的默認方式是baseline，基線對齊。基線指內容的下邊緣
image.png
第一個div里有元素，基線為元素也就是p元素的下邊緣，第二個div內沒有元素，默認的基線是margin下邊緣，那么怎么解決這個問題，讓div並排對齊？改變vertical-align默認對齊方式就可以了，在這里將其設置為top，效果如下：
