So legen Sie den Absatzabstand im CSS fest-CSS-Tutorial-php.cn

So legen Sie den Absatzabstand im CSS fest

醉折花枝作酒筹

Freigeben： 2023-01-05 16:10:08

Original

11677 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!