最近在做項目突然發現用了img后有個空白區,如下圖:
真的很影響美觀,那么是什么原因造成的呢?
右鍵查看元素查看上下文的margin和padding也沒有找到這個空白的來源.
只好上網看看別人是怎么說的:
---------------------------------------------------------------------------這里是分割線--------------------------------------------------------------------------------------------
鏈接：https://www.zhihu.com/question/21558138/answer/18615056
來源：知乎
首先要弄明白CSS對於 display: inline 元素的 vertical-align 各個值的含義。vertical-align 的默認值是 baseline，這是一個西文排版才有的概念：
可以看到，出現在baseline下面的是 p ，q , g 等這些字母下面的那個尾巴。
對比一下 vertical-align 的另外兩個常見值，top 和 bottom:
可以看到，baseline 和 bottom 之間有一定的距離。實際上，inline 的圖片下面那一道空白正是 baseline 和 bottom 之間的這段距離。即使只有圖片沒有文字，只要是 inline 的圖片這段空白都會存在。
那么去掉這段空白的方法有以下幾種:
1. 最直接的辦法是將圖片的 vertical-align 設置為其他值。如果在同一行里有文字混排的話，那應該是用 bottom 或是 middle 比較好。
2.top 和 bottom 之間的值即為 line-height。假如把 line-height 設置為0，那么 baseline 與 bottom 之間的距離也變為0，那道空白也就不見了。
3.如果沒有設置 line-height，line-height 的默認值是基於 font-size 的，視渲染引擎有所不同，但一般是乘以一個系數（比如1.2）。
因此，在沒有設置 line-height 的情況下把 font-size 設為0也可以達到同樣的效果。當然，這樣做的后果就是不能圖文混排了。
圖片底部是基於文字基線的，而容器 div 的底部是低於基線的。所以這個空白實際上是文字基線以下的部分。
4.無論 img 設置 display:block 還是 vertical-align:top/bottom/middle 都將使 img 超出文字基線，致使空白消失。