a標籤的高度比裏面的img高度高問題

緣由:

a元素下有一個匿名文本,這個文本外有一個匿名行級盒子,它有的默認vertical-align是baseline的,並且每每由於上文line-height的影響,使它有個line-height,從而使其有了高度,由於baseline對齊的緣由,這個匿名盒子就會下沉,往下撐開一些距離,因此把a撐高了。佈局

解決方法:

  • 解決方法1  消除掉匿名盒子的高度,也就是給a設置line-height:0或font-size:0;
  • 解決方法2  給二者vertical-align:top,讓其top對齊,而不是baseline對齊
  • 解決方法3  給img以display:block,讓它和匿名行級盒子不在一個佈局上下文中,也就不存在行級盒的對齊問題