4

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

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

4

5 回答 5

5

你需要设置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;
}
于 2013-10-19T05:20:46.850 回答
1

在父跨度上使用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>
于 2013-10-19T05:21:05.063 回答
1

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

<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;
于 2015-06-30T01:37:04.127 回答
0

你有：

<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>
于 2013-10-19T05:23:00.193 回答
0

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

请参阅：内联元素中的顶部边距

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

于 2013-10-19T05:20:32.240 回答