解決 div或者a標籤的高度比裏面的img高度多了5px 問題

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

解決辦法一是消除掉匿名盒子的高度,也就是給a設置line-height:0或font-size:0;
解決辦法二是給兩者vertical-align:top,讓其top對齊,而不是baseline對齊
解決辦法三是給img以display:block,讓它和匿名行級盒子不在一個佈局上下文中,也就不存在行級盒。img是行內元素,默認display: inline; 它與文本的默認行爲類似,下邊緣是與基線對齊,而不是緊貼容器下邊緣。將displayp設置爲block即可消除上面說的幾個像素的差別。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章