填充未正确应用于标题

Question

我正在尝试学习基本的HTML和CSS。这是我目前的代码：

http://jsfiddle.net/spadez/vvDJ9/3/

代码有两个问题：

1. 目前，不仅列表项之间存在很大差距
2. 标题中的列表没有正确应用顶部填充。它应该位于标题的中间。

以下是代码的相关位：

header a { padding: 15px 20px; background-color: #16AD8F; }

此外，如果有人对我的代码有任何建议我会很感激。

Answer 1

这是因为您的li是内嵌块。当然，您可以重做代码并使用浮点数来修复它，例如......或通过将li加在一起来摆脱空白（</li><li>...，请参见此处：http://jsfiddle.net/vvDJ9/6/ ）等等......

但是有一个很好的小黑客可以摆脱空间：将font-size: 0;设置为其父ul元素：http://jsfiddle.net/vvDJ9/5/

#header ul {font-size: 0;}

要正确获得顶部填充，只需将锚点设置为display: block;：http://jsfiddle.net/vvDJ9/9/

#header a {display: block;}