CSS Zeilenabstand einstellen?

[Josh]

hallo.

wie kann ich im css einstellen, wieviele pixel sich zwischen einzelnen zeilen befinden sollen?

danke & gr33tz

j0sh

 

[Franz A.]

Hi j0sh

mit folgendem Attribut:

{line-height: 2;} ergibt doppelten Zeilenabstand,
{line-height: 1.5;} ergibt anderhalb Zeilenabstand (Achtung: Punkt nicht Komma)

mit
{line-height: 18pt;} ist die Zeilenhöhe 18 pt, was auch einen grösseren Zeilenabstand ergibt.

Franz

 

[Josh]

danke für die hilfe!

 

[Tomate]

Hallo!
Ich habe mal eine Frage, die sich auch auf dieses Thema bezieht. Und zwar würde ich per CSS gerne einen anderen Zeilenabstand nach einem Absatz einrichten, als innerhalb des Textes. Gibt es dafür einen Befehl?
Danke

 

[Peter Schneider]

Kannst ja <p> mit CSS formatieren. Da hilft margin: 0 0 0 0; musst lediglich die Zahlen für den Abstand eingeben (ein wenig testen, da alle Himmelsrichtungen drin enthalten sind). Oder margin-bottom und margin-top.

Relativ einfach:
p {margin-bottom: 20px;
margin-top: 20px;}

Wenn Dein Text "normal" aufgebaut ist, z.B.
<h1>Überschrift</h1>
<p>Das ist ein Abschnitt</p>
<p>Das ist ein weiterer Abschnitt</p>

Dann lässt sich nach H1 natürlich auch ein individueller Abstand schalten (Analog mit margin). Experimentier ein wenig mit den Werten... Dasselbe auch, wenn Klassen für p vergeben werden.

 

[Tomate]

Klasse, das funktioniert, danke!

Vielleicht kennt ja zufälligerweise auch jemand eine Möglichkeit, das direkt in den CSS-Text zu schreiben (so wie man ja auch den Zeilenabstand dort einstellen kann)? Schließlich wäre das dann etwas zeitsparender und übersichtlicher

(falls ich mal wieder sowas mache ^^)

 

[Peter Schneider]

Meine Formatierung war ja für eine externe CSS-Datei ;-)

Direkt in den html-Text geht mittels Style-Angabe.

<p style="margin-bottom: 20px; margin-top: 20px">

Aber das ist kontraproduktiv, weil Du bei Änderungen im Design dann alle style-Angaben mehr oder weniger von Hand (oder mit Exteditor) nacheditieren musst.

Oder im Header des html-Dokumentes:
<style type="text/css">
p {margin-top: 35px; margin-bottom: 35px;}
</style>

Oder eben im Header eine externe CSS verlinken:
<link rel="stylesheet" type="text/css" href="main.css">

Btw: ich mixe fröhlich alles zusammen, je nachdem was ich gerade benötige. Solche Angaben und der Ort hängen eben davon ab, ob Du einen Stil über eine ganze Website, nur auf einer Page oder sogar nur für einen bestimmten Befehl benötigst. Je besser Du Dich vorher damit befasst, desto geringer ist Deine Arbeit, wenn Du nachträglich ändern musst.

 

[Hardwarejoe]

wie Peter schon meinte: Man kann sich doch auch einfach in der externen CSS-Datei verschiedenen Abstände einrichten:

.abstand10px {margin-top: 10px; margin-bottom: 10px;}
.abstand20px {margin-top: 20px; margin-bottom: 20px;}
.abstand30px {margin-top: 30px; margin-bottom: 30px;}

<p class="abstand10px">Das ist ein Abschnitt mit 10px Abstand.</p>
<p class="abstand20px">Das ist ein Abschnitt mit 20px Abstand.</p>
<p class="abstand30px">Das ist ein Abschnitt mit 30px Abstand.</p>

Ist flexibler und hält den Quellcode übersichtlicher...

 

[Tomate]

okay ... ich dachte nur, vielleicht geht es NOCH einfacher

Danke soweit ^^