元素的垂直對(duì)齊方式?vertical-align

屬性值

top?頂部對(duì)齊

使元素的上邊框線與所在行框的上框線對(duì)齊

bottom?底部對(duì)齊

使元素的下邊框線與所在行框的下框線對(duì)齊

middle?中心對(duì)齊

使當(dāng)前元素的中線與當(dāng)前行框的基線對(duì)齊

baseline?基線對(duì)齊（默認(rèn)值）

字母 x 的下邊線為基線

該屬性只能給行內(nèi)元素或者行內(nèi)塊元素設(shè)置

瀏覽器遇到行內(nèi)和行內(nèi)塊元素當(dāng)做文字處理，默認(rèn)文字是按基線對(duì)齊，所以行內(nèi)和行內(nèi)塊元素默認(rèn)自帶基線對(duì)齊屬性

img屬性的下邊框線與當(dāng)前行框的基線對(duì)齊

幽靈空白節(jié)點(diǎn)

解決目的：為了去除圖片上下邊框與父元素之間3-5px的空白區(qū)域

原因：img屬性是與文字毫無(wú)關(guān)系的行內(nèi)塊元素，其本身基線位于下框線，但因行內(nèi)塊元素本身自帶的基線對(duì)齊屬性，使其下框線與當(dāng)前行框的基線對(duì)齊，導(dǎo)致幽靈空白節(jié)點(diǎn)的產(chǎn)生（當(dāng)前行框的基線位于小寫字母“x”的下邊）

思路

圖片轉(zhuǎn)為其他類型的元素

改變基線對(duì)齊的效果

去掉基線和底線之間的間距

解決方法

給圖片轉(zhuǎn)為塊元素?display: block;

給圖片設(shè)置 vertical-align: middle/top/bottom;

給元素設(shè)置 line-height: 0;?/?font-size: 0;

去掉圖片左右3-5px的間距（代碼換行會(huì)產(chǎn)生空格）

圖片連著寫

不影響布局的情況下，給圖片加浮動(dòng)