這個(gè)是瀏覽器默認(rèn)添加的padding和magin值的問題吧。 添加一行*{padding:0;margin:0;}試試是不是你要的效果.

額，把ul的line-height設(shè)置為0就可以了。

ul{
  background-color: #ddd;

  line-height: 0;
}

請看文字的各種線之間的關(guān)系：

個(gè)人認(rèn)為：xxx放置在這里就是屬于ul的內(nèi)容，是匿名文本。文本及內(nèi)聯(lián)元素又是默認(rèn)基于基線(baseline)對齊的，所以底部會有空隙。而且匿名文本是的行高是繼承父級的，父級ul的line-height是20px，于是xxx的行高也是20px。有行高的情況下，必然存在行間距，底線到行框之間必然存在距離（即使設(shè)置了垂直對齊方式是基于底線對齊也有距離）。這樣，最直接的解決辦法就是將父級的line-height設(shè)置為0，這樣不存在行高的情況下，匿名文本就可以津貼父級元素底部了。