twitter-bootstrap 引导标签上的css左边距和上边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19462614/
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
css left and top margin on bootstrap labels
提问by lowcoupling
this is my blog main page http://lowcoupling.com/it is a tumblr blog based on Twitter bootstrap. I am trying to have the badges in the footer representing the main topics more separated vertically in this way:
这是我的博客主页http://lowcoupling.com/这是一个基于 Twitter 引导程序的 tumblr 博客。我试图让代表主要主题的页脚中的徽章以这种方式在垂直方向上更加分离：
<span style="margin-left:2px; margin-top:5px;"> <a href="http://lowcoupling.com/tagged/UML/chrono"><span class="label label-default">UML</span> </a></span>
the problem is that the left margin works but the top margin doesn't.
问题是左边距有效，但上边距无效。
回答by Mohsen Safari
you need to set display:block;and float them to left. it is better that you create a class like this:
HTML:
您需要将display:block;它们设置并浮动到左侧。最好创建一个这样的类：HTML：
<span class="footer-link">
<a href="http://lowcoupling.com/tagged/UML/chrono">
<span class="label label-default">UML</span>
</a>
</span>
CSS:
CSS：
span.footer-link{
display:block;
float:left;
margin:5px 0 0 2px;
}
回答by Vikas Ghodke
Use display: inline-blockon parent span and then give margin top or bottom.
display: inline-block在父跨度上使用，然后给上边距或下边距。
<span style="margin-left:2px; margin-top:5px; display: inline-block"> <a href="http://lowcoupling.com/tagged/UML/chrono"><span class="label label-default">UML</span> </a></span>
回答by hussachai
Solution for no space between label
label之间没有空格的解决方法
<span class="label label-default">UML</span>
<span class="label label-default">CSS</span>
You can use space instead of but using is recommended
as it will not be trimmed.
您可以使用空格代替， 但 建议使用，因为它不会被修剪。
Solution for vertical margin
垂直边距的解决方案
Use line-heightas the span will be treated as text. When the text is wrapped, you cannot use margin which apply to block.
使用line-height的范围将被视为文本。当文本被换行时，您不能使用适用于块的边距。
<span class="label label-default" style="line-height: 30px;">UML</span>
回答by James Gould
You have:
你有：
<span style="margin-left:2px; margin-top:5px;">
<a href="http://lowcoupling.com/tagged/UML/chrono">
<span class="label label-default">UML</span>
</a>
</span>
You should have:
你应该有：
<a href="http://lowcoupling.com/tagged/UML/chrono">
<span style="margin-left:2px; margin-top:5px;"></span>
</a>
回答by Daniel Kutik
Vertical margins are ignored on inline elements.
内联元素上的垂直边距被忽略。
See: Margin top in inline element
请参阅：内联元素中的边距顶部
Lookup the meaning of inlineelements and blockelements in HTML.
Furthermore I recommend that you simply have a look at the StackOverflow's implementation of your so-called 'badges'
在 HTML 中查找inline元素和block元素的含义。此外，我建议您只需查看 StackOverflow 对您所谓的“徽章”的实现
