css left and top margin on bootstrap labels

Question

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:

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

score 5 · Accepted Answer · answered Oct 19 '13 at 05:20

you need to set display:block; and float them to left. it is better that you create a class like this: 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;
}

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

Solution for no space between label

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

You can use space instead of   but using   is recommended as it will not be trimmed.

Solution for vertical margin

Use line-height as the span will be treated as text. When the text is wrapped, you cannot use margin which apply to block.

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

score 1 · Answer 3 · answered Oct 19 '13 at 05:21

Use display: inline-block on parent span and then give margin top or bottom.

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

score 0 · Answer 4 · edited May 23 '17 at 10:30

0

Vertical margins are ignored on inline elements.

See: Margin top in inline element

Lookup the meaning of inline elements and block elements in HTML. Furthermore I recommend that you simply have a look at the StackOverflow's implementation of your so-called 'badges'

edited May 23 '17 at 10:30

Community

1
1

answered Oct 19 '13 at 05:20

Daniel Kutik

6,997
2
27
34

score 0 · Answer 5 · answered Oct 19 '13 at 05:23

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>

css left and top margin on bootstrap labels

5 Answers5

Solution for no space between label

Solution for vertical margin