有這樣一個經(jīng)典的問題查排，以下代碼為什么圖片下面有空隙呢？
.omg{
background-color:red;
}
<div class="omg">
<img src="./111.png"/>
</div>
其實抄沮，這就是vertical-align和line-height搞的鬼０虾恕！Ｅ崖颉砂代！首先，大家一定要意識到這么一點：對于內(nèi)聯(lián)元素率挣，vertical-align與line-height雖然看不見刻伊，但實際上到處都是！
那這兩個到底是什么東西呢椒功？
關(guān)于line-height
看代碼：
<div class="word-wrap">
<span class="word1">我是一個大傻逼</span>
<span class="word2">我是一個大傻逼</span>
</div>
.word-wrap{
background-color:blueviolet;
}
.word1{
line-height: 60px;
color: #fff;
background-color: black;
vertical-align: middle;
}
.word2{
color: #fff;
background-color: black;
vertical-align: middle;
}
子元素的line-height會把父元素的高度撐開捶箱，而不是把自己撐開。
可以看到子元素的高度是跟自己的內(nèi)容高度一致的动漾，父元素的高度就是我們設(shè)置的line-height:60px
如果line-height >子元素的高度丁屎，那么多出來的高度就會均分在子元素的頂部和底部。這就可以被我們用來實現(xiàn)垂直居中啦谦炬，真是機智悦屏！
關(guān)于vertical-align
vertical-align有好多種屬性值啊啊啊
/* 關(guān)鍵字值 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* <長度> 值 */
vertical-align: 10em;
vertical-align: 4px;
/* <百分比> 值 */
vertical-align: 10%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
那么問題來了节沦？我們對于內(nèi)聯(lián)樣式完全沒有去設(shè)置vertical-align键思，那么vertical-align默認(rèn)的對齊方式是什么呢？
vertical-align默認(rèn)值是baseline, 也就是 基線對齊甫贯。
什么是基線呢吼鳞？
基線就是字母X的下邊緣，咦叫搁，我們看
如果更改html代碼如下赔桌，我們可以看到
<div class="omg">
<img src="./111.png"/>XX
</div>
媽呀供炎，真的是和X的下邊緣對齊的！＜驳场音诫！
但是X他本身也有高度啊，我們給X加個背景顏色雪位，這時候一切都迎刃而解了
后面XX文字的高度從何而來竭钝？？雹洗？
后面XX文字的高度是由行高決定的香罐！也就是我們的line-height
所以，造成了我們開頭所說的那個問題的罪魁禍?zhǔn)拙褪莑ine-height和vertical-align时肿。
如何解決庇茫？
-
讓vertical-align失效，因為vertical-align只對行內(nèi)元素感冒螃成，如果我們給img加上display:block的屬性就不會有空隙啦
image.png
不過不要影響到頁面本來的布局喲
-
我們也可以給vertical-align設(shè)置其他的值旦签，設(shè)置vertical-align:bottom
img{ vertical-align: bottom; } .Xcolor{ background-color:#fff; vertical-align: bottom; }
參考博文來自張鑫旭大神
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
