一、問題
html進行網頁結構的構建時，經常在div中插入img標簽展示圖片，如果div具有邊框，就會發現img和div之間存在一定的間距，但當前的div的height屬性並沒有設置的比img大。
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="index.css"> 7 </head> 8 <body> 9 <div class="div-box">Girl<img class="pic" src="girl.jpg" /></div> 10 </body> 11 </html>
嘗試了使用了Chrome，Firefox，ie瀏覽器，均有這個問題，以下為Chrome顯示的效果：
可以明顯的看到，圖片與div之間存在間距。
二、分析與解決辦法
當塊級元素包含內聯元素時，內聯元素默認是和塊元素的基線baseline對齊的，比如例子中的文字“Girl”和圖片img均默認的和div的基線對齊，而基線距離塊元素邊框默認的情況下是具有一定的距離的，從而會產生間距。根據產生的原因，可以有以下三種解決辦法：
1. 塊元素font-size: 0 或 line-height: 0
基線距離塊元素的距離與font的位置和font（font-family,font-size）有關，當把父元素的font-size或line-height設置為0時，基線距離塊元素的距離就也變為0，自然就消除了間距。
注：如何父級中含有文字，將font-size設置為0會導致文字無法顯示，要換用其他解決辦法。
2.內聯元素重新設置vertical-align
vertical-align的值除了設置為baseline，主要還有以下幾種：sub|super|top|text-top|middle|bottom|text-bottom。其中super, sub是垂直對齊文本的上下標的，text-top和text-bottom是與父元素字體的頂端或底端對齊，這四個不能用於消除間距。top, middle和bottom均可以使用，只是文字和圖片的相對位置產生不同，結果如下圖：
top: middle: bottom:
注：將vertical-align設置成top,middle,bottom中的哪一個，還是根據html的具體結構來進行，通常情況下使用bottom。
3.內聯元素display: block
將img的display設置為塊顯示，自然不會存在行內對齊的問題，就不會出現間距了。