Heim > Artikel > Web-Frontend > So ändern Sie den Zeilenabstand in CSS

So ändern Sie den Zeilenabstand in CSS

藏色散人Original: 2021-02-28 10:26:193834Durchsuche

So ändern Sie den Zeilenabstand in CSS: 1. Erstellen Sie eine neue HTML-Codeseite. 2. Fügen Sie der HTML-Seite zwei div-Elemente hinzu und legen Sie gleichzeitig Text fest. 3. Fügen Sie eine Klasse von big zu einem der div hinzu Elemente zum Festlegen der Zeile High; 4. Verwenden Sie line-height, um die Zeilenhöhe der großen Klasse festzulegen. Die Syntax lautet „.big{line-height: line-spacing value;}“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Öffnen Sie das HTML-Entwicklungstool, erstellen Sie eine neue HTML-Codeseite, geben Sie dann zwei

in diese HTML-Seite ein, legen Sie etwas Text fest und fügen Sie einer der

-Klassen hinzu, um die Zeilenhöhe festzulegen .

Erstelle

Code:

<div>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
</div>
<br />
<div class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</div>

So ändern Sie den Zeilenabstand in CSS

Zeilenhöhe festlegen. Erstellen Sie nach dem Tag

ein <style>-Tag und legen Sie dann die Zeilenhöhe der großen Klasse fest. <p>CSS-Stilcode: <pre class="brush:php;toolbar:false"><style type="text/css"> .big{ line-height: 300%; } </style></pre><p><img src="https://img.php.cn/upload/image/548/689/103/1614479077654201.png" title="1614479077654201.png" alt="So ändern Sie den Zeilenabstand in CSS"/><p>Speichern Sie die HTML-Seite und öffnen Sie sie mit einem Browser. Sie können sehen, dass der Zeilenabstand im div-Tag, das die große Klasse enthält, auf der Browserseite größer geworden ist. <p><img src="https://img.php.cn/upload/image/228/253/263/1614479081553293.png" title="1614479081553293.png" alt="So ändern Sie den Zeilenabstand in CSS"/><p>Empfohlen: „<a href="https://www.php.cn/course/list/12.html" target="_blank">CSS-Video-Tutorial“</style>

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Zeilenabstand in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 html class

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So machen Sie Schaltflächen im CSS-Stil rundNächster Artikel：So machen Sie Schaltflächen im CSS-Stil rund

In Verbindung stehende Artikel

Mehr sehen