Comment définir la hauteur des lignes de paragraphe et l'espacement des lignes en HTML-tutoriel HTML-php.cn

Comment définir la hauteur des lignes de paragraphe et l'espacement des lignes en HTML

php中世界最好的语言

Libérer： 2017-11-22 17:58:45

original

15586 Les gens l'ont consulté

Comment définir l'espacement haut et bas entre p paragraphes ? Quels styles peuvent contrôler l’espacement des lignes entre

? Comment écrire la hauteur d’une ligne CSS ? Aujourd'hui, nous allons étudier clairement ce paragraphe P afin que chacun puisse maîtriser pleinement le style d'espacement des lignes p et de hauteur de ligne.

Ensuite, nous vous présenterons comment définir l'espacement des lignes supérieure et inférieure du paragraphe p via le style CSS, et p est la balise de paragraphe de l'article. Les attributs CSS div qui contrôlent l'espacement des lignes du paragraphe p sont :

1. css hauteur de ligne

2, marge

3, rembourrage

tutoriel relatif à l'espacement des lignes

1, espacement des lignes de texte CSS

2. Espacement des mots CSS

Parce que la distance supérieure et inférieure entre p est déterminée par le style de marge et le remplissage, et la hauteur de ligne a également un certaine relation. Ensuite, nous présenterons l'espacement des lignes entre p paragraphes à travers des exemples et maîtriserons le réglage de l'espacement des lignes p à travers des exemples CSS.

Description du cas Css+div, afin d'observer l'effet, nous configurons quatre objets boîte DIV, ajoutons p paragraphes à l'intérieur de chacun et définissons différents espacements de ligne pour les p paragraphes afin d'observer leurs effets, fournir des effets, Découvrez les règles et maîtrisez-les. Ensembles CSS p espacement des lignes.

Les noms sont ".div-a", ".div-b", ".div-c", ".div-d"

Dans le style par défaut du paragraphe p tag, La valeur du remplissage est par défaut 0. En même temps, définissez la hauteur de ligne du texte p sur 20px

Cas 1. Définissez la marge supérieure et inférieure sur 0

1 Le code html css+div complet est le suivant :

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

Copier après la connexion

Réglez margin-top à 0, margin-bottom à 0, (comprendre le rôle de la marge automatique)

À travers le Dans l'exemple ci-dessus, on peut observer que si margin-top et margin- Si la valeur de bottom est définie sur 0, alors l'espacement des lignes de paragraphe p n'existera pas et l'effet sera le même que celui de la définition de l'espacement des lignes par la hauteur de la ligne. .

Cas 2, définissez la marge supérieure et inférieure sur 30px

1. Code source HTML complet

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

Copier après la connexion

Ici, la marge CSS est définie pour l'objet ".div -b" :30px auto équivaut à définir la marge supérieure sur 30 px et la marge inférieure sur 30 px

Ajuster l'espacement des lignes via plusieurs paramètres de marge

À partir du cas ci-dessus, nous pouvons voir que l'espacement des paragraphes p peut être obtenu grâce aux paramètres de marge.

Cas 3. Définissez les marges supérieure et inférieure sur 0, et le remplissage supérieur et inférieur sur 20px

1 Exemple complet de code HTML

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

Copier après la connexion

Les ensembles ci-dessus. margin-top et margin- Le bas est tous deux 0, puis nous définissons les valeurs padding-top et padding-bottom sur 20px.

À travers les cas ci-dessus, nous pouvons voir que définir le style de remplissage sur p peut toujours définir l'espacement des lignes.

Cas 4 : Nous ne définissons pas de style de marge ou de remplissage

Nous ne définissons pas de style de marge ni de style de remplissage pour p, ce qui signifie que nous ne définissons pas de style pour p pour voir le style P par défaut effet d'espacement des lignes.

1. Complétez l'exemple de code CSS DIV :

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

Copier après la connexion

Si vous ne définissez pas le style, il reflétera le style par défaut.

C'est toute l'introduction du paragraphe P. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser la balise label en HTML

Comment modifier l'élément de balise de titre HTML

Comment définir l'arrière-plan de l'image d'arrière-plan DIV

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!