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
Margin-bottom for <a> link elements
提问by George Grigorita
I have a problem with margin-top/bottom
on <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-bottom
for the <a>
elements, but the property doesn't get applied.
这就是最终结果的样子。问题很明显,我想要 5 或 10 像素margin-bottom
的<a>
元素,但没有应用该属性。
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;
并非所有浏览器都支持。