Heim >Web-Frontend >CSS-Tutorial >So legen Sie den Absatzabstand im CSS fest

So legen Sie den Absatzabstand im CSS fest

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-20 16:27:5711759Durchsuche

Einstellungsmethode: 1. Verwenden Sie die Einstellung des Zeilenhöhenattributs, die Syntax „Zeilenhöhe: Höhenwert“ 2. Verwenden Sie Padding, um den oberen und unteren Abstand des Absatzes festzulegen, die Syntax „Padding: Abstandswert 0“. 3. Verwenden Sie den Rand, um den oberen und unteren Absatzabstand festzulegen. Die Syntax lautet „Rand: Abstandswert 0“.

So legen Sie den Absatzabstand im CSS fest

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

Es gibt drei gängige Möglichkeiten, den Abstand zwischen oberen und unteren Absätzen über CSS festzulegen:

1 Zeilenhöhe

Je größer wir den Wert der Zeilenhöhe festlegen, desto größer wird der Absatzabstand Gleichzeitig erhöhen sich auch die Wörter und der Zeilenabstand. Es wird nicht empfohlen, diesen Zeilenhöhenstil zum Festlegen des Absatzabstands zu verwenden. Um den Effekt zu beobachten, setzen wir die CSS-Zeilenhöhe auf 20 Pixel bzw. 50 Pixel, um den Effekt zu vergleichen.

Schlüssel-CSS-Code: p{line-height:22px}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
p{ 
    line-height:30px
}
/* css 注释: 设置行高为30px */
</style>
</head>
<body>
<p>第一段,第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p>
</body>
</html>

2. CSS-Polsterung Innenpolsterung (Innenrand)

Es wird empfohlen, Polsterung zu verwenden, um den oberen und unteren Abstand von Absätzen festzulegen. Durch Festlegen des oberen und unteren Innenabstands und des Innenabstands können Sie den oberen und unteren Abstand von p Absätzen festlegen.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style> 
p{ 
    padding:15px 0
    }
/* css注释: 设置padding为上下15px */
</style>
</head>
<body>
<p>第一段,第一行<br /> 第二行</p>
<p>第二段</p> 
<p>第三段</p>
</body>
</html>

3. CSS-Rand

Der Rand zur Anpassung des CSS-Absatzabstands realisiert die Einstellung des Abstandsstils zwischen den oberen und unteren Absätzen. Wir wissen, dass der Rand den Abstand zwischen den oberen, unteren, linken und rechten Objekten und dem Objekt festlegt . Dieser CSS-Stil kann auch hier für die Absätze verwendet werden.

<!DOCTYPE html>
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>document</title>
 <style>
  p{
      margin:10px 0
  } 
  /* css注释: 设置margin为对象上下间距10px */ 
  </style> 
  </head> 
  <body>
   <p>第一段,第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> 
   </body> 
   </html>

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie den Absatzabstand im CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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 verstecken Sie div mit CSSNächster Artikel:So verstecken Sie div mit CSS