CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lowcoupling
lowcoupling

Reputation: 2169

css left and top margin on bootstrap labels

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.

Upvotes: 4

Views: 17413

Answers (5)

hussachai
hussachai

Reputation: 4472

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 &nbsp; but using &nbsp; 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;

Upvotes: 3

James G.
James G.

Reputation: 2904

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>

Upvotes: 0

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

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>

Upvotes: 1

Mohsen Safari
Mohsen Safari

Reputation: 6795

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

Upvotes: 5

Daniel K
Daniel K

Reputation: 7083

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'

Upvotes: 0

Related Questions