元素底部留有空白

2021-07-02 17:34:36 字數 963 閱讀 5552

要理解這個問題,首先要弄明白css對於 display: inline 元素的 vertical-align 各個值的含義。vertical-align 的預設值是 baseline,這是乙個西文排版才有的概念:

可以看到,出現在baseline下面的是 p 啊,q 啊, g 啊這些字母下面的那個尾巴。

對比一下 vertical-align 的另外兩個常見值,top 和 bottom:

可以看到,baseline 和 bottom 之間有一定的距離。實際上,inline 的下面那一道空白正是 baseline 和 bottom 之間的這段距離。即使只有沒有文字,只要是 inline 的這段空白都會存在。

到這裡就比較明顯了,要去掉這段空白,最直接的辦法是將的 vertical-align 設定為其他值。如果在同一行裡有文字混排的話,那應該是用 bottom 或是 middle 比較好。

另外,top 和 bottom 之間的值即為 line-height。假如把 line-height 設定為0,那麼 baseline 與 bottom 之間的距離也變為0,那道空白也就不見了。如果沒有設定 line-height,line-height 的預設值是基於 font-size 的,視渲染引擎有所不同,但一般是乘以乙個係數(比如1.2)。因此,在沒有設定 line-height 的情況下把 font-size 設為0也可以達到同樣的效果。當然,這樣做的後果就是不能**混排了。

因此,總結,去掉

1、img

2、img

3、div     //外層為行內元素時也可以設定line-height:0;

元素底部為何有空白?

要理解這個問題,首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline,這是乙個西文排版才有的概念 對比一下 vertical align 的另外兩個常見值,top 和 bottom 可以看...

img底部總是有空白

最近在做專案時,使用table,div,css布局,最頂部加入img 後,底部總是有空白 經過查詢了大量資料,問題總算是解決了。1 將轉換為塊級物件 即,設定img的style為 style display block 或是在本例中新增一組css img 經試驗,此方法可以解決。2 設定的垂直對齊方...

元素底部為何有空白及其解決方案

要理解這個問題,首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline,這是乙個西文排版才有的概念。vertical align的有效取值為baseline,sub,super,top,te...