Правильно ли я использую CSS parent> child selector?

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> элементов моего #footer div?

Я пытаюсь подобный эффект без селектора parent > child где-то еще на моей странице, поэтому я предполагаю, что это проблема с моим селектором.

Версия браузера: Chrome 11 Beta Mac OS X

Answer 1

@ boss, <a> - встроенный элемент, а не блочный элемент.Таким образом, вертикальный отступ и отступ работают только на элементе блока.Затем определите display:block в вашем теге a для получения дополнительной информации, отметьте это Почему нижние отступы и нижние поля не помогают добавить вертикальный интервал между этими ссылками?

Answer 2

Я не совсем уверен, почему это не работает, однако в качестве средства защиты я рекомендую обернуть все ваши ссылки как div и присвоить этому margin-top.Проверьте скрипку ...

http://jsfiddle.net/Ft7Tr/

Надеюсь, это поможет.
Христо

Answer 3

Будет ли #footer a:first-child делать это?

- Ответ из комментариев ниже -

Ах, они все встроенные. Чтобы определить отступы отдельно от других, они должны быть «блочными» элементами, плавающими рядом друг с другом?

Добавление

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

даст вам возможность дать первый отступ, у двух других нет