Question

这是我的博客主页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>

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

Answer 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;
}

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

Answer 3

垂直边距的解决方案

使用line-height，因为跨度将被视为文本。文本被包装时，您不能使用适用于块的边距。

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

Answer 4

内联元素会忽略垂直边距。

请参阅：Margin top in inline element

查找HTML中inline元素和block元素的含义。此外，我建议您只需查看StackOverflow实现的所谓“徽章”

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

css自举标签上的左上边距

5 个答案:

标签

垂直边距的解决方案