Question

我有以下标记：

<div id="footer">
    <a href="/">Home</a> | 
    <a href="/about">About</a> | 
    <a href="/contact">Contact</a>
</div>

具有以下样式：

#footer {
    position: relative;
    float: left;
    background: white;
    width: 960px;
    height: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 50px;
    box-shadow: 2px 2px 3px #000;
    -moz-box-shadow: 2px 2px 3px #000;
    -webkit-box-shadow: 2px 2px 3px #000;
}
#footer > a {
    padding-top: 10px;
}

是否有任何特殊原因导致填充不适用于<a> div的所有子#footer元素？

我在页面上的其他地方没有parent > child选择器的情况下尝试了类似的效果，所以我假设选择器出了问题。

浏览器版本：Chrome 11 Beta Mac OS X

Answer 1

@boss，<a>是内联元素而不是块元素。所以，垂直边距和填充仅适用于块元素。然后在display:block代码中定义a以获取更多信息，请查看此Why do bottom padding and bottom margins not help to add vertical spacing between these links?

Answer 2

#footer a:first-child会这样做吗？

- 从下面的评论中回答 -

啊，他们都是内联的。要定义与其他填充分开的填充，它们需要是“阻塞”元素，彼此相邻？

添加

#footer a { display:block; float:left; }

会让你能够给第一个填充，而另外两个没有

Answer 3

我不太确定为什么这不起作用，但作为补救措施，我建议将所有链接包装成div并给予margin-top。看看小提琴......

http://jsfiddle.net/Ft7Tr/

我希望这会有所帮助赫里斯托斯

我使用CSS父母＆gt;儿童选择器正确？

3 个答案: