<a> link elements</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;
}

这是最终结果的样子。问题很明显，我希望margin-bottom元素的<a>为5或10px，但该属性不会被应用。

我错过了什么？

Answer 1

您需要将display: inline-block;添加到锚点选择器。锚定义是内联元素，不接受宽度，高度，边距等，直到它们被定义为块级别或内联块元素。

Answer 2

我认为你最好做display:block;和float:left;因为所有浏览器都不支持display:inline-block;。