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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11969427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:48:29  来源:igfitidea点击:

Margin-bottom for <a> link elements

cssmobile-safari

提问by George Grigorita

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

margin-top/bottom<a>元素上有问题- 它似乎不起作用。

This is the HTML code:

这是 HTML 代码:

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

This is the CSS code:

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

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

这就是最终结果的样子。问题很明显,我想要 5 或 10 像素margin-bottom<a>元素,但没有应用该属性。

enter image description here

在此处输入图片说明

What am I missing?

我错过了什么?

回答by Kyle

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.

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

回答by bobek

I think you're better of doing display:block;and float:left;because display:inline-block;is not supported in all browsers.

我认为您最好这样做display:block;float:left;因为display:inline-block;并非所有浏览器都支持。