為什麼a標籤中使用img後的高度多了幾個畫素?

時間 2021-05-29 23:10:33

1樓:大地dudy

a元素下有乙個匿名文字,這個文字外有乙個匿名行級盒子,它有的預設vertical-align是baseline的,而且往往因為上文line-height的影響,使它有個line-height,從而使其有了高度,因為baseline對齊的原因,這個匿名盒子就會下沉,往下撐開一些距離,所以把a撐高了。

解決辦法一是消除掉匿名盒子的高度,也就是給a設定line-height:0或font-size:0;

解決辦法二是給兩者vertical-align:top,讓其top對齊,而不是baseline對齊

解決辦法三是給img以display:block,讓它和匿名行級盒子不在乙個布局上下文中,也就不存在行級盒的對齊問題

其他解決辦法也有,但這些都是從根本上解決問題

2樓:Zack

這個主要是因為img是行內元素,它的下邊緣預設是與基線對齊的,將img的display設定成block,或者將font-size設為0。也可以將a標籤的display設定為block或者inline-block,並將其行高line-height設為0。

3樓:Feiyan Hu

終於找到原因了,因為img是行內元素,預設display: inline; 它與文字的預設行為類似,下邊緣是與基線對齊,而不是緊貼容器下邊緣。將displayp設定為block即可消除上面說的幾個畫素的差別。

為什麼 C 中使用虛函式時會影響效率?

C 中使用虛函式不會影響效率。你遇到的場景,都沒到需要考慮流水線 friendly 的程度,先把東西寫出來,別想沒用的。 maple 因為查詢虛函式表的時候會有效率損失,可以通過模板的CRTP技術實現靜態繫結,詳見 C CRTP Curiously Recurring Template Patter...

為什麼很多遊戲中使用WASD作為方向鍵?

Milo Yip Arrow keys Primarily,WASD is used to account for the fact that the arrow keys are not ergonomic to use in conjunction with a right handed mou...

為什麼三星不在他的所有版本旗艦手機中使用自家處理器?

AL舒云 別人為難他他有自己的路,別人不為難他他有市場的路,市場的路可以賺錢,自己的路可以保命,我們可以賺錢,但保命的本事貌似還差點 只是為了少交點專利費。高通享有cdma的專利,如果手機支援cdma,那麼就要給高通交專利費,不管你用的是誰家的soc。有些地區完全沒有cdma網路,在這些地區銷售支援...