Zeilenabstand auf der gesamten Webseite

-1

Ich möchte mehr Platz zwischen Zeilen auf meiner Webseite haben. Ich habe versucht, „line-height“ in CSS anwenden, um zu versuchen und mehr Platz zu schaffen, aber ich merkte, dass es nicht funktioniert:Zeilenabstand auf der gesamten Webseite

https://gyazo.com/63c28f6ce59b8a5e17cf3d9835effa9e

Auf dem Bild, das ich ein Stück Text innerhalb eines div, p oder span. Wenn der Text zu lang wird, wird er schließlich in mehreren Zeilen enden. Wenn das passiert, möchte ich, dass zwischen den Linien mehr Platz ist.

Wie kann ich das tun?

Quelle

2017-01-04 Vanquiza

Fügen Sie einfach Linie 'Line-height' Attribut zu' Körper-Tag? Wenn das nicht funktioniert, verwenden Sie vielleicht ein CSS-Framework oder CSS-Dateien von Drittanbietern, die es überschreiben. Aber ohne Code können wir dir nicht wirklich helfen. – Paul

für Fragen wie diese, würde ich empfehlen, das Problem/Code-Schnipsel auf einem öffentlichen Dienst wie jsfiddle.net zu reproduzieren und es hier zu veröffentlichen, damit wir eine bessere Vorstellung davon bekommen können, was Sie probiert haben und wie Sie es verbessern können. –

Das ist genau mit der CSS-Eigenschaft line-height getan.

Wenn Sie die gleiche line-height auf Ihre gesamte Website möchten, können Sie einfach es wie so auf Ihrem body Element anwenden:

body { 
    line-height: 1.5; // a numerical value, or 
    line-height: 25px; // a pixel value, for example 
}

Sie auch bestimmte Tags oder Klassen zielen könnte:

// applies to all <p> elements 
p { 
    line-height: 1.3em; 
} 

// applies only to elements with the .my_paragraph class 
.my_paragraph { 
    line-height: 20px; 
}

Sie können mehr über die Werte, die Sie verwenden können, und das Verhalten von line-height unter the MDN specification page lesen.

Quelle

2017-01-04 09:42:22

Von http://www.w3schools.com/cssref/pr_dim_line-height.asp ist das folgende Beispiel

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p.small { 
    line-height: 70%; 
} 

p.big { 
    line-height: 200%; 
} 
</style> 
</head> 
<body> 

<p> 
This is a paragraph with a standard line-height.<br> 
This is a paragraph with a standard line-height.<br> 
The default line height in most browsers is about 110% to 120%.<br> 
</p> 

<p class="small"> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
</p> 

<p class="big"> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
</p> 

</body> 
</html>

Quelle

2017-01-04 09:43:17 baliman

Verwenden line-height-Attribut in Ihrem Körper Tag genau wie das Beispiel oben:

body { 
 
    line-height:2em; 
 
}

<body> 
 
    <h1>This is just a title</h1> 
 
    <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div> 
 
</body>

Wenn dies nicht tun funktionieren, kann es aufgrund einer anderen CSS-Datei (zum Beispiel aus Ihrem CSS-Framework, wenn Sie eine verwenden) das Attribut überschreiben. Versuchen Sie also, das !important-Tag zu Ihrem line-height-Attribut hinzuzufügen.

p { 
    line-height: 24px; 
}

oder:

Quelle

2017-01-04 09:43:49 Paul

Sie können die folgenden, um sicherzustellen, über die gesamte Website, dass line-height gilt global hinzufügen

body, 
p { 
    line-height: 24px; 
}

Quelle

2017-01-04 09:48:23

Zeilenabstand auf der gesamten Webseite

Antwort

Verwandte Themen