Maison >interface Web >tutoriel CSS >Comment définir l'espacement des paragraphes CSS
Comment définir l'espacement des paragraphes CSS
- 醉折花枝作酒筹original
- 2021-04-20 16:27:5711759parcourir
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".
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>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>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>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!