Sign in to follow this  
Josh

CSS Zeilenabstand einstellen?

Recommended Posts

hallo.

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

danke & gr33tz

j0sh

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 wink.gif

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 cool.gif

(falls ich mal wieder sowas mache ^^)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this