引导标签上的css左边距和上边距答案

【问题标题】：css left and top margin on bootstrap labels引导标签上的css左边距和上边距
【发布时间】：2013-10-19 05:12:37
【问题描述】：

这是我的博客主页http://lowcoupling.com/ 它是一个基于 Twitter bootstrap 的 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>

问题是左边距有效，但上边距无效。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您需要设置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：

span.footer-link{
   display:block;
   float:left;
   margin:5px 0 0 2px;
}

【讨论】：

【解决方案2】：

在父跨度上使用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>

【讨论】：

【解决方案3】：

标签之间没有空格的解决方法

<span class="label label-default">UML</span>&nbsp;
<span class="label label-default">CSS</span>&nbsp;

您可以使用空格代替&nbsp;，但建议使用&nbsp; 因为它不会被修剪。

垂直边距的解决方案

使用line-height 作为跨度将被视为文本。当文本被换行时，您不能使用适用于块的边距。

<span class="label label-default" style="line-height: 30px;">UML</span>&nbsp;

【讨论】：

【解决方案4】：

内联元素的垂直边距被忽略。

见：Margin top in inline element

在 HTML 中查找 inline 元素和 block 元素的含义。此外，我建议您简单地看一下 StackOverflow 对您所谓的“徽章”的实现

【讨论】：

【解决方案5】：

你有：

<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>

你应该有：

<a href="http://lowcoupling.com/tagged/UML/chrono">
<span style="margin-left:2px; margin-top:5px;"></span>
</a>

【讨论】：