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

インライン要素では、垂直マージンは無視されます。

参考：インライン要素のマージントップ

HTMLのinline要素と要素の意味を調べます。blockさらに、いわゆる「バッジ」の StackOverflow の実装を確認することをお勧めします。

于 2013-10-19T05:20:32.240 に答える
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 に答える