a標籤中使用img後的高度多了幾個像素

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，讓它和匿名行級盒子不在一個佈局上下文中，也就不存在行級盒的對齊問題

做者：大地Dudy
連接：http://www.zhihu.com/question/26821863/answer/65552730
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

img標籤有時候會出現下方平白無故多出像素的BUG

1. 解決方法1:

   設置 img 的 vertical-align: bottom;

   ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ vertical-align:bottom; }

2. 2

   解決方法2:

   設置 img 的 margin-bottom: -5px;

   ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ margin-bottom: -5px; }

3. 3

   解決方法3

   設置 ul 的 font-size:0;

   ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; }

4. 4

   解決方法4

   使li浮動，並設置img爲塊級元素

   ul{ width: 280px; } ul li{ float:left; display:block; height:57px; width:277px; } img{ display: block; }