Heim >Web-Frontend >HTML-Tutorial >So legen Sie die Zeilenhöhe und den Zeilenabstand eines Absatzes in HTML fest
So legen Sie die Zeilenhöhe und den Zeilenabstand eines Absatzes in HTML fest
- php中世界最好的语言Original
- 2017-11-22 17:58:4515582Durchsuche
Wie stelle ich den oberen und unteren Abstand zwischen p-Absätzen ein? Welche Stile können den Zeilenabstand zwischen e388a4556c0f65e1904146cc1a846bee 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 Siemargin-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>margin-bottomauf 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 30pxPassen 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>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 Wertepadding-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>padding-bottomauf 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>Verwandte Lektüre:
So verwenden Sie das Label-Tag in HTMLSo ä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!