在包裹層里嵌套的兩個(gè)div設(shè)置display: inline-block時(shí)，正常情況下兩個(gè)div會(huì)并排顯示留攒，如圖
image.png
代碼：
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
}
但是如果在其中一個(gè)div里面加上一些內(nèi)容，神奇的事發(fā)生了肪凛，第一個(gè)div出現(xiàn)了下移卿捎，如圖：
image.png
這塊我只在html代碼加了p標(biāo)簽
<div id="box">
<div class="content1">
<p>11111</p>
</div>
<div class="content2"></div>
</div>
查閱了相關(guān)資料發(fā)現(xiàn)，在將元素display設(shè)置為inline-block的時(shí)候柄沮，元素即同時(shí)具有內(nèi)聯(lián)元素和塊級(jí)元素的屬性，既排列在同一行又可以設(shè)置寬高逐工。
對(duì)于內(nèi)聯(lián)元素，都具有vertical-align屬性漂辐，那這里就牽涉到vertical-align的默認(rèn)對(duì)齊方式泪喊。 它的默認(rèn)方式是baseline，基線對(duì)齊髓涯√惶洌基線指內(nèi)容的下邊緣
image.png
第一個(gè)div里有元素，基線為元素也就是p元素的下邊緣纬纪，第二個(gè)div內(nèi)沒有元素蚓再，默認(rèn)的基線是margin下邊緣，那么怎么解決這個(gè)問題包各，讓div并排對(duì)齊摘仅？改變vertical-align默認(rèn)對(duì)齊方式就可以了，在這里將其設(shè)置為top问畅，效果如下：
image.png
參考文章：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
