Geek Answers Handbook

Css left and top margin on boot shortcuts

this is the main page of my blog http://lowcoupling.com/ this is a tumblr blog based on Twitter downloads. I am trying to have icons in the footer representing the main topics, more vertically divided 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 does not.

+4
source share
5 answers

you need to install display:block;and put them to the left. better to 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;
}
+5
source

Use display: inline-blockin the parent range, and then give the edge above or below.

<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>
+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;
+1

.

:

inline block HTML. , StackOverflow ""

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

More articles:


All Articles