Voir écran :

L'étape suivante consiste à comprendre le document CSS. Encore une fois, si vous appuyez à nouveau sur ctrl + U, la ligne 33 nous dira où document css. Nous avons de la chance qu'il n'y ait qu'un seul document CSS. S'il y a plusieurs documents, alors il faudra tout parcourir !

C'est la ligne qui nous intéresse ! De là, nous voyons que le document CSS se trouve dans le dossier numéro 1969, et nous recherchons le style de fichier 5. (vous pouvez également utiliser celui-ci)

Ouvrez le fichier style5, appuyez sur ctrl + F (recherche) et collez-le ici Panoramique à droite Cliquez sur Rechercher suivant.

Ici, nous voyons que notre identifiant est rightPan. Mais le style surligné en bleu est une description de l'identifiant lui-même, mais nous avons besoin du style suivant

Et la ligne qui nous intéresse, qui pointe vers interligne:

hauteur de ligne : 1em ;

Voir écran :

Deuxième option:

Comment réduire l'espace entre les lignes.

Nous allons maintenant utiliser programme gratuit En tant qu'éditeur de code.

Tout le monde ne veut pas utiliser Dreamweaver, mais nous avons quand même besoin d'effectuer une recherche, bien sûr, elle est disponible dans un simple bloc-notes, mais je préfère quand même outil professionnel, que je vous conseille aussi !

Comme nous l'avons écrit ci-dessus, la première chose que nous devons trouver est l'endroit où se trouve le texte principal et où est décrite la distance entre les lignes.

Par exemple, regardons à nouveau cette page !

N'importe quel navigateur permet de visualiser le code d'un élément ! Le navigateur utilisé est le navigateur Yandex (également dans Opera). Sélectionnez la partie du texte dans laquelle vous devez modifier l'interligne. Appuyez sur RMB, recherchez la ligne affichant le code de l'élément.

1. Le texte sélectionné.
2. Sur la gauche se trouve l'endroit où il se trouve.
3. Un style attaché au texte sélectionné.

Voir page entière, je l'ai sauvegardé dans grande taille –

hauteur de ligne : 1em ;

Et nous changeons la valeur numérique pour celle que nous voulons !

DANS Distance CSS Il est très facile de définir entre les lignes. Il existe une propriété spéciale pour cela. Mais, bien sûr, il existe de nombreux autres paramètres universels et pouvant être appliqués au texte.

Si aucun réglage n'est effectué, les valeurs par défaut sont définies. Vous pouvez modifier cette distance si vous le souhaitez. La valeur peut être un pourcentage ou des pixels.

Hauteur de rangée

En CSS, la distance entre les lignes peut être démontrée par l'image suivante.

L'image ci-dessus montre les paramètres avec les distances correspondantes. Le texte est situé dans l'espace de taille de police. Veuillez noter que la ligne de texte ne commence pas à la base, mais légèrement au-dessus. L'espace ci-dessous est prévu pour les lettres contenant des éléments ci-dessous (g, y, etc.).

Notez que l’espace entre les blocs de taille de police est appelé interlignage. En HTML et CSS, cette propriété n'apparaît en aucun cas, mais elle l'est dans d'autres graphiques et éditeurs de texte. Par exemple, dans Adobe Photoshop.

La figure ci-dessus montre où vous pouvez spécifier l'interlignage dans Photoshop. Et à côté se trouve le paramètre font-size.

Exemples d'utilisation de la hauteur de ligne

En CSS, la distance entre les lignes peut être définie en pourcentage. Un exemple illustratif est donné ci-dessous.

Si la valeur est faible, il sera gênant pour l'utilisateur de votre site de le lire.

La distance peut également être modifiée par la taille de la police. Si la différence entre les paramètres principaux est très différente en chiffres, cette différence est alors compensée en augmentant l'avance.

Subtilités du design

En CSS, l'espacement entre les lignes peut être ajusté davantage avec différents remplissages. Regardons l'exemple de la figure.

Dans notre cas, le champ « Élément » contiendra du texte. Le remplissage est le remplissage à l'intérieur d'un objet et la marge est le remplissage derrière l'objet. La bordure est un cadre. Cela peut être 0 pixel ou 100.

L'image suivante montre simultanément tout le remplissage, la bordure et la hauteur de ligne du texte.

Si votre texte est petit, une seule ligne ou si chaque ligne se trouve dans un paragraphe distinct, la distance peut être ajustée en mettant en retrait entre ces paragraphes. Autrement dit, le marquage et le remplissage entre les lignes d'un élément n'ont aucun effet. Ils créent une indentation uniquement le long des bords de l'objet. L'objet est le paragraphe entier, pas les lignes qu'il contient. Il est important de ne pas se tromper ici.

Dans les cas où il y a plusieurs lignes et que tout cela se trouve dans un seul objet, il est recommandé de modifier la police avec les paramètres principaux.

Comment augmenter l'espace entre les lignes CSS

Distance entre Lignes HTML peut être attribué à n’importe quelle classe ou à tous les paragraphes du texte. Si vous le spécifiez comme ceci : p ( line-height:20px; ), alors absolument tous les paragraphes de la page auront des lignes de 20 pixels. Si vous avez besoin de différentes tailles à différents endroits, il est recommandé de procéder comme suit.

Nous écrivons des styles.

Classe1 (hauteur de ligne:20px;)

Classe2 (hauteur de ligne:16px;)

Classe3 (hauteur de ligne:12px;)

Pour plus de clarté, ajoutons un cadre pour que vous puissiez voir que cela fonctionne. À l'avenir, il devra être supprimé.

Veuillez noter que dans le troisième cas, la bande recouvrait le texte. C'est parce qu'elle est supérieure à la hauteur de la ligne. Il est donc important de s’assurer qu’il n’y ait pas de telles contradictions. Si vous créez une petite hauteur de ligne, réduisez la police en conséquence.

Il n'est pas recommandé de rendre le texte trop petit et l'espace entre les lignes trop petit. Car aucun utilisateur ne peut lire sereinement tout cela. Ses yeux vont vite se fatiguer. Moteurs de recherche Ils disent également que le texte doit être convivial.

D’ailleurs, récemment le temps file une grande importance accordée à la commodité pour utilisateurs mobiles. Là-bas, les recommandations disent toujours que la taille de la police doit être normale et non petite. Cela affecte particulièrement les liens. Avec leur petite taille, il sera difficile pour l’utilisateur de naviguer sur le site.

Le moteur de recherche Google dispose d’un outil spécial qui facilite cette analyse. C’est très pratique pour les webmasters.

Voici un exemple des résultats qui pourraient survenir.

De plus, nous analyserons avec vous les propriétés qui permettront de formater non seulement l'espacement entre les lignes de texte, mais également la distance entre les cellules du tableau. Passons maintenant à la partie amusante !

Levons nos mains au-dessus du clavier et élargissons les lignes !

Juste au cas où, je commencerai le chapitre par une explication de « qu’est-ce que l’espacement des lignes ».

La distance entre les lignes d’un paragraphe est appelée interligne. Également parfois utilisé terme moderne- menant.

Pour le formatage ce paramètre Avec les feuilles de style en cascade, vous n'avez besoin de connaître qu'une seule propriété : hauteur de la ligne.

Dans des situations normales, la signification hauteur de la ligne est défini automatiquement en fonction de la police, du type de style et de la taille des caractères sélectionnés. Cependant, s'il est nécessaire d'augmenter ou de diminuer l'espacement dans le texte, cela peut être fait exclusivement via l'outil décrit.

hauteur de la ligne fournit deux intégrés mots clés UN:

• normale– la distance entre les lignes de paragraphe est calculée automatiquement ;
• hériter– le formatage de l'objet parent est hérité.

De plus, vous pouvez définir vous-même la taille des retraits. La propriété prend en charge toutes les unités de mesure existantes en CSS. Ainsi, vous pouvez spécifier l'intervalle en pourcentages, points, pixels, ems et autres.

Cependant, le type d’indentation est généralement simplement spécifié sous forme de nombre. Par exemple, hauteur de ligne : 1,5; indique qu'un interligne et demi est sélectionné dans le contenu.

Je pense que ceux qui étaient particulièrement curieux ont posé la question : « Comment fonctionne un tel mécanisme ? La réponse est très simple : utiliser la multiplication. L'interlignage est défini à partir de la ligne de base. Si la valeur de la propriété est indiquée par un nombre, elle est alors reconnue comme un multiplicateur par lequel la valeur de base est multipliée.

Maintenant, je veux vous donner un petit exemple. Je l'ai utilisé pour créer un en-tête et une liste numérotée régulière.

Place désormais aux tables !

Pour les tableaux, vous pouvez également utiliser propriété CSS doubler-hauteur. Il définira l'espacement des cellules entre les lignes de texte. Cependant, dans certains cas, ce sont les cellules qui doivent être déplacées et non leur contenu.

Pour mettre en œuvre une telle technique, il existe une propriété espacement des bordures. Cet élément ne fonctionne que s'il se trouve dans une autre propriété de table effondrement des frontières un affichage séparé des cellules du tableau est indiqué ( border-collapse : séparé), c'est à dire. la double ligne n'est pas supprimée.

Pourquoi cela arrive-t-il? espacement des bordures définit la distance entre le contenu et les bordures de l'élément tableau. Par défaut, un cadre différent est défini pour chaque élément. Si utilisé propriété border-collapse: effondrement, alors ce qui suit se produit : le navigateur analyse la vue tableau et supprime les doubles lignes.

Dans ce cas, il reste une ligne entre les lignes et les colonnes, qui se transforme en une bordure commune pour plusieurs éléments du tableau à la fois.

À la propriété espacement des bordures il n'y a pas de mots-clés, donc les valeurs sont spécifiées sous forme d'unités. Vous pouvez définir une ou deux valeurs. Dans le second cas, le premier paramètre déterminera l'intervalle horizontal, le second - vertical.

Passons à la pratique. Nous entrerons les informations de l'exemple précédent dans le tableau.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

Mondialisation Aspects positifs de la mondialisation Renforcer et stimuler la libre concurrence pour le développement actif des technologies ; Une division mondiale du travail qui favorise une répartition équitable des ressources importantes ; Élever le niveau de vie de l’humanité.

Mondialisation

Aspects positifs de la mondialisation	Renforcer et stimuler la libre concurrence pour le développement actif des technologies ;
	Une division mondiale du travail qui favorise une répartition équitable des ressources importantes ;
	Élever le niveau de vie de l’humanité.

Propriété hauteur de la 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. Cela signifie que l'espace réel entre les lignes sera calculé comme ceci : hauteur de la ligne - taille de police= distance entre les lignes de texte. Ou vice versa hauteur de la ligne = taille de police+ distance entre les lignes de texte.

Propriété hauteur de la ligne 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).

Exemples

Exemple

hauteur de la ligne - taille de police= 35px - 13px = 21px :

P (taille de police : 13 px ; hauteur de ligne : 35 px ; )

Résultat de l'exécution du code :

Exemple

Réduisons l'écart à 21px - 13px = 7px:

P (taille de police : 13 px ; hauteur de ligne : 21 px ; )

Résultat de l'exécution du code :

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.

Exemple

DANS dans cet exemple la distance entre les lignes de texte sera hauteur de la ligne - taille de police = 13px - 13px = 0px- les lignes collent presque ensemble (les queues des lettres ligne supérieure touchera les queues des lettres inférieures) :

P (taille de police : 13 px ; hauteur de ligne : 13 px ; )

Résultat de l'exécution du code :

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.

Exemple

Dans cet exemple, la valeur hauteur de la ligne- multiplicateur 1,5 à partir de la taille de la police. Ainsi hauteur de la ligne sera équivalent taille de police * 1.5 = 13px * 1.5 = 20px. Et le véritable espace entre les lignes sera hauteur de la ligne - taille de police = 20px - 13px = 7px:

P (taille de police : 13 px ; hauteur de ligne : 1,5 ; )

Résultat de l'exécution du code :

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.

Exemple

Augmentons le multiplicateur :

P (taille de police : 13 px ; hauteur de ligne : 2,5 ; )

Résultat de l'exécution du code :

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.

Exemple

Si tu fais hauteur de la ligne moins taille de police, alors les lignes se chevaucheront généralement :

P (taille de police : 13 px ; hauteur de ligne : 9 px ; )

Le résultat de l'exécution du code.

CSS est très nécessaire pour styliser le texte. Tout spécialiste les utilise toujours s'il crée un beau site internet. Grâce à ces attributs, vous pouvez effectuer n'importe quelle opération avec du texte.

En règle générale, la plupart des concepteurs de mise en page n'aiment pas le formatage de texte par défaut en HTML. L'espacement des lignes CSS vous permet de personnaliser à peu près tout ce que vous pouvez imaginer. Et si vous allez plus loin, vous pouvez faire quelque chose qui ne vous est même jamais venu à l’esprit.

Comment ajouter un interligne au texte en CSS

Il est important de comprendre que vous pouvez définir la taille des lignes, les retraits, etc. pour tous les éléments contenant du texte. Par exemple, tous ces attributs sont parfaits pour :

• paragraphe;
• listes;
• ;
• les tables;
• en-têtes ;
• et tout le reste où vous placez du texte.

Lorsque l’on considère l’espacement des lignes CSS, les premières choses à rechercher sont les attributs suivants.

Dans Photoshop, il existe un concept appelé Leading. Un tel attribut n'existe pas en CSS, mais grâce à lui, vous pouvez clarifier ce point. L'interligne est en fait la distance entre les lignes.

En CSS, la taille de ligne est spécifiée par les paramètres line-height et font-size. Comme vous pouvez le voir, la figure indique clairement que font-size est la taille de la police. Pas une seule lettre ne dépasse ces limites.

La hauteur de ligne est la distance entre le milieu du Leading supérieur et le milieu du Leading inférieur. Tout cela est indiqué par des flèches sur la figure.

Veuillez noter que si vous spécifiez une hauteur de ligne inférieure à la taille de la police, les lignes se chevaucheront. Assurez-vous de garder un œil sur cela afin qu'une telle situation ne se produise pas.

Certaines personnes se demandent pourquoi la taille de la police est plus basse que la ligne avec les lettres. C'est simple. Après tout, certaines lettres sont inférieures au niveau principal de la ligne. Ci-dessous sur l'image - exemple clair, qui utilise des symboles haut et bas.

Comme vous pouvez le constater, les lettres occupent toute la plage de tailles de police. Et la hauteur de la ligne est plus grande et un espace égal est ajouté des deux côtés.

La valeur de l'attribut line-height peut être n'importe quelle valeur :

• pixels ;
• pouces;
• points;
• intérêt;
• et d'autres qui sont utilisés en CSS.

Vous ne pouvez pas spécifier une valeur négative. Par exemple, si vous spécifiez un multiplicateur de un et demi, vous obtiendrez un espacement standard d'un et demi dans le texte.

Si vous spécifiez un pourcentage, gardez à l'esprit que 100 % en hauteur de ligne équivaut à la valeur de taille de police.

De plus, vous pouvez spécifier la valeur normale ou hériter. Si vous spécifiez normal, la distance entre les lignes sera calculée automatiquement par le navigateur à sa discrétion. La signification peut varier selon le navigateur. Il est recommandé de définir un numéro spécifique afin que tous les utilisateurs aient le même numéro.

Hériter signifie que la valeur sera exactement la même que celle de l'élément parent.

Conception plus détaillée

L'espacement des lignes CSS ne se limite pas aux seuls attributs ci-dessus. La distance peut également être ajustée à l'aide des attributs margin et padding. Si vous spécifiez l'attribut exactement comme margin="5px", alors une distance de 5 pixels sera ajoutée de tous les côtés de la ligne (paragraphe).

Si vous devez spécifier uniquement au-dessus du paragraphe, vous pouvez spécifier margin-top. La traduction est très simple. De cette façon, vous pouvez définir des retraits de chaque côté.

Veuillez noter qu'il existe également un attribut padding. Cela fonctionne exactement de la même manière que la marge. Vous pouvez définir à la fois une indentation générale et une direction spécifique (gauche, droite, haut, bas).

Regardez attentivement l'image ci-dessus. La marge est la marge à l'extérieur de l'objet et le remplissage est à l'intérieur.

Ces attributs sont globaux. Ils peuvent être appliqués à n'importe quoi : images, tableaux, textes, liens, etc.

Souvenez-vous-en une fois pour toutes. C'est très point important lors de la conception d'objets. Par exemple, grâce à la marge, vous pouvez spécifier les retraits entre le texte et les images qu'il contient. Si ces indentations ne sont pas présentes, alors le texte sera placé à proximité de l'image.

Si vous avez du texte dans un tableau, utilisez un remplissage pour empêcher le texte de coller aux bords du tableau, car cela semble moche. Et si vous définissez un retrait d'au moins 5 pixels, cela sera bien meilleur. En plus de la hauteur, une ligne possède un attribut de largeur.

Parfois, c'est une propriété très nécessaire. La figure ci-dessous montre un exemple de différentes largeurs de texte.

Exemple de conception

Lors de la création d’un site Web, vous devez toujours vous assurer que le texte est aussi lisible que possible. Si le texte est difficile à lire pour l'utilisateur (il est trop petit ou trop grand), alors il fermera simplement votre site.

Essayez de comparer les deux paragraphes affichés dans l'image ci-dessous. Quel texte vous convient le mieux à lire ?

L'espacement des lignes CSS est conçu pour rendre le texte plus facile à lire. N'oubliez pas non plus que les différentes polices peuvent différer dans leur hauteur d'origine.

Pour plus de clarté, vous pouvez le vérifier dans n'importe quel éditeur. Comparons plusieurs polices.

Veuillez noter que toutes les polices sont écrites en 24 pixels. Comme vous pouvez le constater, ils diffèrent tous par la hauteur et la largeur des lettres. Si vous comparez des tailles plus grandes, la différence sera plus évidente.

CSS : espacement des lignes de liste

Le paramètre d'intervalle s'applique également aux listes. De plus, les styles de liste sont caractérisés par la marge et le remplissage décrits ci-dessus. Grâce à cela, les listes deviennent plus belles que les listes standard. En utilisant tous ces attributs, vous pouvez définir :

• La hauteur des éléments de la liste.
• Indentation pour le texte à gauche.
• Retraits pour les lignes en haut et en bas.
• La largeur maximale de chaque élément.

Conclusion

Ayant un tel ensemble d'attributs, vous pouvez jouer avec la conception non seulement des lignes, mais aussi avec tout ce que vous voulez. Il s'agit de paramètres globaux auxquels sont soumis absolument tous les éléments (à l'exception de la taille de la police, puisqu'elle concerne uniquement le texte).