abstand zwischen 2 <span>'s

[Krobbus]

Wie kriege ich es hin, dass die beiden <span> links nicht direkt nebeneinander stehen, sondern dass da etwas abstand zwischen ihnen ist. habe schon alles mögliche mit padding etc probiert, aber irgendwie kriege ich das nicht hin.

hier mein Code:

<div style='float: right'>
<span class='container'><a href='".$url_dl."' class='link-1'><em><b>Instant Download</b></em></a></span>
<span class='container'><a href='".$url."' class='link-1'><em><b>Go to Website</b></em></a></span>
</div>

Hier ist meine CSS Datei:

.link-1 { display:block; float:left; background:url(images/link_bg.gif) repeat-x left top; color:#ffffff; text-decoration:none; }
.link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top; }
.link-1  b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:0 11px 0 11px; line-height:27px; font-weight:normal; font-style:normal;}
.link-1:hover{ text-decoration:none; color:#000000}

 

[zatec]

Einfach den Spans einen margin geben? und nicht den b-Tags ;)

 

[Marv]

Hallo,
dass die spans keine Angaben durch margin übernehmen und so kein Abstand entsteht,
liegt daran, dass spans inline-Elemente sind und ihnen somit die entsprechenden Block Eigenschaften fehlen.

Die Lösung ist somit den spans (durch die Klasse "container")
durch display:inline-block; entsprechende Eigenschaften zu verleihen:

.container	{
display:inline-block;
margin-right:10px;
}