So legen Sie die Zeilenhöhe und den Zeilenabstand eines Absatzes in HTML fest-HTML-Tutorial-php.cn

So legen Sie die Zeilenhöhe und den Zeilenabstand eines Absatzes in HTML fest

php中世界最好的语言

Freigeben： 2017-11-22 17:58:45

Original

15581 Leute haben es durchsucht

Wie stelle ich den oberen und unteren Abstand zwischen p-Absätzen ein? Welche Stile können den Zeilenabstand zwischen

steuern? Wie schreibe ich CSS-Zeilenhöhe? Heute werden wir diesen P-Absatz genau studieren, damit jeder den P-Zeilenabstand und den Zeilenhöhenstil vollständig beherrschen kann.

Dann stellen wir Ihnen vor, wie Sie den oberen und unteren Zeilenabstand von p-Absätzen über den CSS-Stil festlegen und wie p das Artikel-Absatz-Tag ist. Die CSS-Div-Attribute, die den Zeilenabstand von p-Absätzen steuern, sind:

1. CSS Zeilenhöhe

2, Rand

3, Auffüllung

bezogenes Tutorial zum Zeilenabstand und Abstand

1, CSS-Textzeilenabstand

2. CSS-Wortabstand

Da der obere und untere Abstand zwischen p durch den Randstil und die Auffüllung bestimmt wird und die Zeilenhöhe auch einen hat bestimmte Beziehung. Als nächstes werden wir den Zeilenabstand zwischen p-Absätzen anhand von Beispielen vorstellen und die Einstellung des p-Zeilenabstands anhand von CSS-Beispielen beherrschen.

Css+div-Fallbeschreibung: Um den Effekt zu beobachten, richten wir vier DIV-Box-Objekte ein, fügen jeweils p Absätze hinzu und legen unterschiedliche Zeilenabstände für die p Absätze fest, um ihre Auswirkungen zu beobachten, Effekte bereitzustellen, Finden Sie die Regeln heraus und beherrschen Sie sie. CSS legt den p-Zeilenabstand fest.

Die Namen sind „.div-a“, „.div-b“, „.div-c“, „.div-d“

Im Standardstil des p-Absatzes tag, Der Wert der Auffüllung ist standardmäßig 0. Stellen Sie gleichzeitig die Zeilenhöhe des p-Textes auf 20 Pixel ein.

Setzen Sie

margin-top

auf 0,

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示</title> 
<style> 
p{ line-height:20px} 
.div-a p{ margin:0 auto} 
</style> 
</head> 
<body> 
<div class="div-a"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

Nach dem Login kopieren

margin-bottom

auf 0 (verstehen Sie die Rolle von Margin Auto) Durch die Im obigen Beispiel kann beobachtet werden, dass, wenn margin-top und margin- Wenn der Wert von unten auf 0 gesetzt ist, der Zeilenabstand des p-Absatzes nicht vorhanden ist und der Effekt derselbe ist, als würde man den Zeilenabstand anhand der Zeilenhöhe festlegen . Fall 2: Stellen Sie den oberen und unteren Rand auf 30 Pixel ein.

1. Vollständiger HTML-Quellcode.

Hier wird der CSS-Rand für das Objekt „.div“ festgelegt -b" :30px auto entspricht der Einstellung von margin-top auf 30px und margin-bottom auf 30px

Passen Sie den Zeilenabstand über mehrere Randeinstellungen an

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示</title> 
<style> 
p{ line-height:20px} 
.div-b p{ margin:30px auto} 
</style> 
</head> 
<body><div class="div-b"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

Nach dem Login kopieren

Passen Sie den Zeilenabstand über mehrere Randeinstellungen an

Aus dem obigen Fall können wir ersehen, dass ein p-Absatzabstand durch Randeinstellungen erreicht werden kann.

Fall 3. Stellen Sie den oberen und unteren Rand auf 0 und den oberen und unteren Abstand auf 20 Pixel ein.

1. Vollständiger Beispiel-HTML-Code

Die oben genannten Sätze margin-top und margin- The Bottom sind beide 0, und dann setzen wir die Werte

padding-top

und

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示 </title> 
<style> 
p{ line-height:20px} 
.div-c p{ margin:0 auto; padding:20px 0} 
</style> 
</head> 
<body> 
<div class="div-c"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

Nach dem Login kopieren

padding-bottom

auf 20px. Anhand der oben genannten Fälle können wir sehen, dass durch Festlegen des Auffüllstils auf p immer noch der Zeilenabstand festgelegt werden kann. Fall 4: Wir legen keinen Rand- oder Füllstil fest

Wir legen keinen Rand- und Füllstil für p fest, was bedeutet, dass wir keinen Stil für p festlegen, um den Standard-P-Stil anzuzeigen Zeilenabstandseffekt.

1. Vervollständigen Sie den DIV-CSS-Beispielcode:

Wenn Sie den Stil nicht festlegen, wird er den p-Standardstil widerspiegeln.

Das ist die Einleitung zum P-Absatz. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示 </title> 
<style> 
p{ line-height:20px} 
.div-d p{ } 
</style> 
</head> 
<body> 
<div class="div-d"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

Nach dem Login kopieren

Verwandte Lektüre:

So verwenden Sie das Label-Tag in HTML

So ändern Sie das HTML-Titel-Tag-Element

So legen Sie den DIV-Hintergrundbildhintergrund fest

Das obige ist der detaillierte Inhalt vonSo legen Sie die Zeilenhöhe und den Zeilenabstand eines Absatzes in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!