Comment définir l'espacement des paragraphes CSS-tutoriel CSS-php.cn

Comment définir l'espacement des paragraphes CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:08

original

11764 Les gens l'ont consulté

Méthode de paramétrage : 1. Utilisez le paramètre d'attribut line-height, la syntaxe "line-height: height value" ; 2. Utilisez padding pour définir l'espacement haut et bas du paragraphe, la syntaxe "padding : valeur d'espacement 0"; 3. Utiliser la marge Définissez l'espacement entre les paragraphes supérieur et inférieur avec la syntaxe "marge : valeur d'espacement 0".

Comment définir l'espacement des paragraphes CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Il existe trois manières courantes de définir la distance entre les paragraphes supérieurs et inférieurs via CSS, comme suit :

1 Line-height

Nous définissons la valeur de line-. hauteur plus S'il est plus grand, l'espacement des paragraphes augmentera et l'espacement entre les mots augmentera également. Il n'est pas recommandé d'utiliser ce style de hauteur de ligne pour définir la distance d'espacement des paragraphes. Afin d'observer l'effet, nous définissons la hauteur de ligne CSS respectivement à 20 px et 50 px pour comparer l'effet.

Code CSS clé : 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>

Copier après la connexion

2. Remplissage CSS intérieur (marge intérieure)

Il est recommandé d'utiliser un remplissage pour définir le espacement haut et bas des paragraphes. En définissant le remplissage intérieur supérieur et inférieur et la distance intérieure, vous pouvez définir l'espacement supérieur et inférieur de p paragraphes.

<!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>

Copier après la connexion

3. marge css

L'ajustement de la marge d'espacement des paragraphes CSS réalise le paramètre de style de distance d'espacement entre les paragraphes supérieur et inférieur. , objets gauche et droit Ce paragraphe peut également utiliser ce style CSS pour obtenir l'espacement.

<!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>

Copier après la connexion

Apprentissage recommandé : Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!