CSS - Text und Rahmenabstand Problem

[enforcer31]

moin,

ich habe ein problem den Abstand zwischen Text und Rahmen (nach rechts) einzustellen.

normalerweise sollte ich für diese Übung innerhalb des <span> Tags
den Abstand einstellen, doch dies bekam ich erst gar nicht hin.

Nun bin ich auf <div> ausgewichen.
Aber leider bekomme ich es mit margin-right; o.ä. erst gar nicht.
Code:

<div style="border-width: 1cm; border-style: solid; border-color: #00FF00; padding-right: 10px; padding-left:10px; padding-top:10px; padding-buttom:10px;">Wichtiger Text</div>

Text und Rahmen soll ein gleichmäßiger Abstand von 10 Pixeln haben.....

Weiss jemand Rat?
Maybe bekommt man es auch ohne das <div> Tag hin?

Gruss.

PS: Eigendlich sollte der Code so aussehen, nur leider sieht man den oberen Rahmen nicht:

<span style="border-width: 1cm; border-style: solid; border-color: #00FF00; padding-right: 10px; padding-left:10px; padding-top:10px; padding-buttom:10px;">Wichtiger Text</span>

 

[da_loki]

Hi enforcer,

eigentlich sollte dies in kurzschreibweise so funktionieren.

<span style="border: 1cm solid #00FF00; padding: 10px;height: 5cm;">wichtiger text</span>

Die Angabe height ist wichtig, wenn die Texthöhe nicht so ist, dass ein 1cm breiter Rahmen ermöglicht wird.
CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell
padding: Innenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[enforcer31]

Ich kann leider immer noch nicht den oberen Rand erkennen.

Hast Du den Code schon selber mal in den Browser geladen?

 

[da_loki]

Bei mir im FireFox 2.0.0.3 sieht das nach genau dem aus, was du beschrieben hast.
Im IE7 lief das auch -.-

 

[enforcer31]

Ja, stimmt.

Der Abstand stimmt.
Aber wie kann ich die Position verändern innerhalbt den span Tags?

Im Augenblick sieht man den oberen Rand nicht.
Der wird vom Browsermenu verdeckt.
d.h. es müsste weiter nach unten Positioniert werden.

 

[Tar]

margin-top:10px ?

oder einfach ein <br /> vor den <span> ;)

 

[enforcer31]

Das mit dem margin-top funzt irgendwie nicht.

..und ich muss die Position innerhalb des span-tags setzen.

mit <br> wärs ja einfach. :-(

Derzeitiger Code:

<span style="margin-top: 10px; border: 1cm solid #00FF00; padding: 10px;height: 5cm;">wichtiger text</span>

 

[Frank]

wenn du es mit einem span element benutzt musst du glaube ich noch

display:block;

einfügen - oder nimm gleich eine div

Das problem ist dass du folgendes mit einem span erreichst:
Du schreibst in einer zeile normal - willst dann aber plötzlich z.b. für ein Wort einen abstand nach oben - so groß ist aber die Ziele gar nicht.

Eine andere variante wäre line-hight und vertical-align (wenn es unbeding span sein muss)

 

[enforcer31]

Danke.

Hab ich auch schon versucht.

Das beste Ergebnis bekam ich jetzt mit:

<span style="position: absolute;margin-top: 10px; border: 1cm solid #00FF00; padding: 10px;">wichtiger text</span>

wooo;Jump

..wobei margin-top unbrauchbar geworden ist.