<a>链接元素的边距底部

Question

我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>元素,但属性不会被应用.

我错过了什么？

Answer 1

您需要添加display: inline-block;到锚点选择器.根据定义,锚点是内联元素,并且在它们被定义为块级别或内联块元素之前不接受宽度,高度,边距等.