Нижний край для элементов ссылок

У меня проблема с элементами margin-top/bottom на <a> - она не работает.

Это код HTML:

<div class="pages-link">
     <a href="#">1</a>
     <a href="#">2</a>
     <a href="#">3</a>
     ....
</div>

Это код CSS:

.pages-link {
     margin:2em 0;
     word-spacing:.25em;
}

.pages-link a {
     background:#d7d7d7;
     border:1px solid #ccc;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
     -khtml-border-radius:3px;
     border-radius:3px;
     color:#333;
     padding:.3em .5em;
     text-decoration:none;
}

Вот как выглядит конечный результат. Проблема очевидна, я хочу 5 или 10px margin-bottom для элементов <a>, но свойство не применяется.

Что мне не хватает?

Ответ 1

Вам нужно добавить display: inline-block; в свой селектор привязки. Якоря по определению являются встроенными элементами и не принимают ширину, высоту, маржу и т.д. До тех пор, пока они не будут определены как элементы уровня блока или встроенного блока.

Ответ 2

Я думаю, что вам лучше делать display:block; и float:left;, потому что display:inline-block; не поддерживается во всех браузерах.