< a>的边距底部链接元素 [英] Margin-bottom for <a> link elements

问题描述

我在<a>元素上的margin-top/bottom有问题-似乎不起作用.

I have a problem with margin-top/bottom on <a> elements - it doesn't seem to work.

这是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;
}

这是最终结果的样子.问题很明显，我想要<a>元素的margin-bottom为5或10px，但该属性未得到应用.

This is how the final result looks like. The problem is obvious, I want 5 or 10px of margin-bottom for the <a> elements, but the property doesn't get applied.

我想念什么?

推荐答案

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

You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.

这篇关于< a>的边距底部链接元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！