Propriété hauteur de ligne définit l'espacement entre les lignes de texte (espacement des lignes). La propriété ne définit pas l'espace entre les lignes de texte comme cela pourrait paraître, elle définit hauteur de la ligne de texte hauteur de ligne - . Cela signifie que l'espace réel entre les lignes sera calculé comme ceci : taille de police hauteur de ligne = . Cela signifie que l'espace réel entre les lignes sera calculé comme ceci := distance entre les lignes de texte.

Propriété hauteur de ligne Ou vice-versa

+ distance entre les lignes de texte.

parfois utilisé de manière non standard pour centrer le texte en hauteur.

Syntaxe

Sélecteur ( hauteur de ligne : unités CSS | pourcentage | multiplicateur | normal | hériter ; ) Valeurs).

Par défaut, le navigateur sélectionne automatiquement l'espacement des lignes (

normale

hauteur de ligne - . Cela signifie que l'espace réel entre les lignes sera calculé comme ceci : Exemples

Exemple

= 35px - 13px = 21px :

normale

P (taille de police : 13 px ; hauteur de ligne : 35 px ; ) Résultat de l'exécution du code : - Réduisons l'écart à = 21px:

13px

= 35px - 13px = 21px :

7px

normale

P (taille de police : 13 px ; hauteur de ligne : 21 px ; ) hauteur de ligne - . Cela signifie que l'espace réel entre les lignes sera calculé comme ceci : = Réduisons l'écart à - Réduisons l'écart à = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Enéen a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui. Dans cet exemple, la distance entre les lignes de texte sera

0px

= 35px - 13px = 21px :

7px

normale

- les lignes vont presque se coller (les queues des lettres de la ligne du haut toucheront les queues des lettres du bas) : hauteur de ligne P (taille de police : 13 px ; hauteur de ligne : 13 px ; ) hauteur de ligne Dans cet exemple, la valeur . Cela signifie que l'espace réel entre les lignes sera calculé comme ceci : * 1.5 = Réduisons l'écart à * 1.5 = - multiplicateur 1,5 à partir de la taille de la police. Ainsi hauteur de ligne - . Cela signifie que l'espace réel entre les lignes sera calculé comme ceci : = - multiplicateur 1,5 à partir de la taille de la police. - Réduisons l'écart à = 21px:

sera équivalent

= 35px - 13px = 21px :

7px

normale

20px

. Et le véritable espace entre les lignes sera

= 35px - 13px = 21px :

7px

normale

P (taille de police : 13 px ; hauteur de ligne : 1,5 ; ) hauteur de ligne Augmentons le multiplicateur : . Cela signifie que l'espace réel entre les lignes sera calculé comme ceci : P (taille de police : 13 px ; hauteur de ligne : 2,5 ; )

Si tu fais

moins

, alors les lignes se chevaucheront généralement : P (taille de police : 13 px ; hauteur de ligne : 9 px ; )

Brèves informations

Désignations

Syntaxe

Tout nombre supérieur à zéro est traité comme un multiplicateur de la taille de police du texte actuel. Par exemple, une valeur de 1,5 définit un interligne et demi. Toutes les unités de longueur acceptées en CSS sont également acceptées comme valeurs - pixels (px), pouces (in), points (pt), etc. Il est permis d'utiliser la notation en pourcentage, dans ce cas, la hauteur de la police est prise comme 100 %.

Normal La distance entre les lignes est calculée automatiquement.

Bac à sable

Winnie l'ourson n'était toujours pas opposée à un petit rafraîchissement, surtout à onze heures du matin, car à cette heure-là, le petit-déjeuner était terminé depuis longtemps et le déjeuner n'avait pas encore commencé. Et bien sûr, il était terriblement heureux de voir que le Lapin sortait des tasses et des assiettes.

div (hauteur de ligne : 0,5 ; )

Exemple

Postulat normal : algèbre ou plus grande et plus petite valeur d'une fonction ?

Le voisinage epsilon, sauf cas évident, supporte une intégrale complexe sur un domaine infini.

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Application de la propriété line-height

Modèle objet

Objet.style.lineHeight

Note

Internet Explorer antérieur à la version 7.0 ne calcule pas correctement les hauteurs de ligne des images et des éléments de formulaire.

Spécification

Chaque spécification passe par plusieurs étapes d'approbation.

• Recommandation - La spécification a été approuvée par le W3C et est recommandée comme norme.
• Recommandation du candidat ( Recommandation possible) - le groupe responsable de la norme est convaincu qu'elle atteint ses objectifs, mais a besoin de l'aide de la communauté de développement pour mettre en œuvre la norme.
• Recommandation proposée Recommandation suggérée) - à ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
• Brouillon de travail - Une version plus aboutie d'un brouillon qui a été discuté et modifié pour examen par la communauté.
• Brouillon de l'éditeur ( Projet éditorial) - une version préliminaire de la norme après modifications apportées par les éditeurs du projet.
• Brouillon ( Projet de spécification) - la première version préliminaire de la norme.

La propriété HTML margin est utilisée pour ajouter une marge ou un espace entre différents éléments. La propriété padding est utilisée pour ajouter un espace entre le contenu et la bordure (cadre) de l'élément HTML spécifié.

La différence entre margin et padding est visible dans l’image suivante :

Consultez également la démo pour mieux comprendre la différence entre ces deux propriétés.

Voir la démo et le code

Nous avons trois éléments div. Les deux premiers concernent la propriété HTML margin et le troisième la propriété padding. L'espace entre les éléments div est margin et l'espace entre le texte à l'intérieur du troisième div et sa bordure est padding.

Syntaxe de remplissage et de marge CSS

La syntaxe utilisée pour déclarer une seule propriété de marge CSS est :

Ce code définit le remplissage dans toutes les directions : haut, bas, gauche et droite. Si vous devez définir un remplissage pour différentes directions, vous pouvez le faire en utilisant la déclaration abrégée suivante :

marge : 10px 20px 50px 100px ;

• 10px — remplissage supérieur ;
• 20px - remplissage droit ;
• 30px — rembourrage inférieur ;
• 40px - remplissage gauche.

Vous pouvez également définir la marge gauche HTML et d'autres directions séparément :

Remarque : Peut être utilisé pour définir l'indentation px, pts, cm, etc.

Syntaxe des propriétés de remplissage CSS

La propriété padding peut être définie à l'aide d'une déclaration simple/abrégée ou à l'aide d'une déclaration distincte pour chaque direction.

Déclaration unique avec une seule signification :

Pour chaque direction avec une seule annonce :

remplissage : 10 px, 20 px, 50 px, 100 px ;

Si quatre valeurs sont spécifiées, leur ordre est le même que pour la propriété HTML CSS margin.

Pour chaque direction séparément :

rembourrage supérieur : 10 px ; remplissage à droite : 20 px ; rembourrage inférieur : 30 px ; remplissage à gauche : 40 px ;

Exemple de définition des marges et des retraits dans une liste HTML

Dans l'introduction, j'ai montré les propriétés margin et padding utilisées dans l'élément div. Dans cette démo, j'ai créé une liste en utilisant des éléments de menu qui sont des liens. La liste est placée à l'intérieur d'un élément div. Il contient des éléments de menu sous forme d'hyperliens.

La liste est définie par d'autres propriétés CSS, mais sans utiliser les propriétés HTML margin et padding, elle ressemblera à ceci :

Voir la démo et le code

En ajoutant des marges de 10 px pour les liens à l'intérieur

:

nous obtiendrons la vue suivante :





Voir la démo et le code en ligne

La classe entière pour les liens au sein d'un élément

sera le suivant :

remplissage : 10 px ; marge : 2px ; décoration de texte : aucune ; couleur : #fff ; couleur d'arrière-plan : #DA8119 ; affichage:bloc;

Démonstration de champs à l'aide d'un exemple de tableau HTML

Vous trouverez ci-dessous un exemple d'utilisation de la propriété padding dans un tableau HTML. J'ai créé un tableau avec plusieurs lignes.

Le tableau est stylisé à l'aide de diverses propriétés CSS. Tout d’abord, regardez à quoi ressemble le tableau sans la propriété padding appliquée :




Voir la démo et le code

En ajoutant des champs, on obtient un tableau qui ressemble à ceci :




Voir la démo et le code

Vous trouverez ci-dessous le code des styles utilisés pour . L'intégralité du code peut être consultée en suivant le lien ci-dessus :

remplissage : 20 px ; bordure : pointillé 1px #DF7000 ; arrière-plan : #D0E8AC ; couleur : #000 ;

Un exemple d'utilisation des marges et du remplissage avec l'élément form

Les propriétés de remplissage de marge HTML peuvent également être appliquées aux éléments de formulaire : champs de texte, boutons, etc.

La propriété padding, lorsqu'elle est appliquée à une zone de texte, spécifie l'espace entre le curseur à l'intérieur de la zone de texte et sa bordure. margin ajoute un remplissage entre divers champs de texte ou autres éléments de formulaire.

Pour que ce soit plus clair, je vais créer un formulaire et montrer la différence entre les champs utilisant et sans les propriétés margin et padding. L'apparence initiale du formulaire sans appliquer les propriétés margin et padding :



En ajoutant des champs à la classe textbox et à la classe bouton btn, on se retrouve avec un formulaire qui ressemble à ceci :

Marges des champs de texte :

Champs des boutons :

remplissage : 9px 15px ;



Voir la démo et le code

Pour augmenter ou diminuer les marges entre les champs de texte, utilisez la propriété HTML CSS margin. Dans cette démo, j'ai utilisé une valeur négative pour réduire la distance entre les champs.

Les champs du formulaire ressembleront à ceci :



Voir la démo et le code

Après avoir utilisé une valeur négative dans la marge HTML, la distance entre les champs de texte a diminué de 3 pixels.

En utilisant la propriété padding, nous avons augmenté la distance entre le curseur à l'intérieur du champ de texte et la ligne de bordure, qui est définie par d'autres propriétés. Maintenant, le terrain semble bien meilleur.

Pour le bouton Sauvegarder" Nous avons également appliqué la propriété padding :

remplissage : 9px 15px ;

qui est utilisé pour aligner le texte dans toutes les directions.

Traduction de l'article " Remplissage et marge CSS – Expliqué avec 4 éléments HTML» a été préparé par l'équipe sympathique du projet

Dans le cas des documents HTML, les balises servent davantage à baliser le contenu qu'à indiquer comment il doit être présenté. Un meilleur contrôle sur la présentation est obtenu avec les styles. Dans cet article, j'examinerai les styles associés au formatage des paragraphes en HTML.

Étiqueter

En HTML, vous pouvez spécifier des paragraphes et l'attribut align les aligne à gauche, à droite, au centre ou justifiés. En plus d'eux, nous utiliserons l'attribut de style global.

Alignement des paragraphes

Vous pouvez aligner un paragraphe à l'aide de l'attribut align avec les valeurs suivantes :

text-align : gauche|droite|centre|justifier|initial|hériter ;

Copiez le code suivant dans votre fichier .html.

Ce paragraphe est aligné au centre

Ce paragraphe est aligné à droite

Ce paragraphe apparaît justifié dans la fenêtre du navigateur. Un paragraphe justifié est aligné à droite et à gauche en ajoutant des espaces supplémentaires. Vous pouvez voir que les bords du paragraphe justifié correspondent aux bords des paragraphes alignés à gauche et à droite. Dans un paragraphe aligné à gauche, le bord gauche est droit, tandis que dans un paragraphe aligné à droite, le bord droit est droit. Voyez-vous que les deux bords de ce paragraphe sont droits ? Ceci est réalisé grâce au style text-align:justify.

Dans une fenêtre de navigateur, le code HTML du paragraphe ressemble à ceci :

Espacement des lignes

Vous pouvez contrôler l’espacement des lignes de paragraphe en utilisant style=line-height . Utilisez l'attribut style avec les valeurs suivantes :

hauteur de ligne : normal|nombre|longueur|initiale|hériter ;

Vous trouverez ci-dessous un exemple de code HTML affichant des paragraphes avec des interlignes différents :

Ce paragraphe utilise deux valeurs pour l'attribut style. La première valeur line-height:1.5 spécifie un interligne d'un et demi pour le paragraphe, et la deuxième valeur text-align:justify spécifie que le texte du paragraphe doit être réparti sur toute la largeur.

Ce paragraphe est à double interligne et justifié. line-height:2 spécifie un double espacement. Il n’est pas nécessaire que l’attribut style ait deux valeurs. Mais si vous devez spécifier deux valeurs, vous pouvez le faire en les séparant par un point-virgule.








Voici quelques manières différentes d’utiliser la valeur line-height pour l’attribut style :

: Définit l'espacement des lignes à 13 pixels ;


: Définit l'espacement HTML entre les paragraphes à 200 % par rapport à la taille de police actuelle ;


: Définit la hauteur de ligne à 14 pixels.

Indentations

J'ai utilisé le terme « retraits » pour faciliter la compréhension. Mais en HTML, nous utilisons l'espacement pour créer un espace vide autour d'un objet. Vous pouvez utiliser l'attribut style avec une valeur de remplissage pour mettre un paragraphe en retrait vers la gauche ou la droite.

Vous trouverez ci-dessous un exemple de paragraphes avec une indentation à gauche et à droite :

Ce paragraphe n'est pas en retrait, il est simplement justifié. Regardez l'attribut de style de l'élément P pour ce paragraphe.

Pour ce paragraphe, j'ai défini le remplissage gauche sur 30px en utilisant le style padding-left:30px. Ce paragraphe est également justifié à l’aide du style text-align:justify. Comme vous le savez déjà, nous pouvons utiliser plusieurs valeurs pour l'attribut Style en les séparant par un point-virgule.

Et ce paragraphe a un retrait à droite de 30 pixels, mais pas de retrait à gauche. Il est également aligné sur la largeur. La valeur 'padding-right' de l'attribut style spécifie le remplissage droit. Si vous ne voyez pas l'effet, réduisez la largeur de la fenêtre de votre navigateur afin que le paragraphe HTML justifié s'affiche correctement.




Retraits entre les paragraphes (retrait avant et après le paragraphe)

Nous n'en avons pas besoin en HTML ou CSS. Nous pouvons simplement spécifier le style de remplissage de l'élément

Padding-top et padding-bottom spécifient un espace blanc avant et après un paragraphe, qui agit comme un remplissage en haut ou en bas. Regardez l'exemple de balise ci-dessous

J'ai défini le premier paragraphe HTML pour qu'il ait un remplissage de 10 pixels avant le deuxième paragraphe et de 50 pixels après le deuxième paragraphe :

Ce paragraphe ne comporte aucune indentation avant ou après spécifiée. Il s’agit d’un paragraphe régulier, justifié. Comme vous le savez déjà, nous pouvons aligner un paragraphe en utilisant le code style="text-align:justify" à l'intérieur de la balise.

Ce paragraphe est surdimensionné. Il comporte également 10 pixels de remplissage avant le paragraphe et 50 pixels après. À l’intérieur de la balise, j’ai défini 3 styles.

Il s'agit d'un paragraphe normal sans retrait ni alignement par défaut.








Choses à retenir

• Un paragraphe HTML peut être aligné à l'aide de l'attribut align ou du style text-align ;
• Le HTML sera rendu différemment selon la taille de l'écran et la taille des fenêtres du navigateur ;
• L'ajout d'espaces supplémentaires ou de lignes vides à votre code HTML n'affecte pas le résultat. Le navigateur supprime tous les espaces supplémentaires ;
• Les balises définissent ce qui doit être affiché et les styles définissent comment cela doit être affiché ;
• Les styles peuvent être spécifiés de trois manières différentes : en ligne (dans les balises), interne ( dans le même fichier HTML en utilisant l'élément