Réglages du CSS: l'espacement des lignes

En CSS, la distance entre les lignes est très facile à définir. A cet effet, il y a une propriété particulière. Mais, bien sûr, il y a beaucoup d'autres paramètres, qui sont universels et peuvent être appliquées au texte.

Si aucun réglage est effectué, vous définissez les valeurs par défaut. vous pouvez modifier la distance si on le souhaite. La valeur peut être soit un pourcentage ou pixels.

hauteur de ligne

La distance entre les lignes CSS peut être démontrée par la figure suivante.

Dans l'image ci-dessus montre les paramètres avec des distances correspondantes. Le texte est dans l'espace-taille de la police. Notez que la ligne de texte ne démarre pas à la base et légèrement plus élevé. L'espace prévu ci-dessous pour des lettres qui ont des éléments inférieurs (g, y, et ainsi de suite).

Notez que l'espace entre la taille de police des blocs est appelée tête. Avec HTML et CSS cette propriété ne semble pas, mais il est dans les autres éditeurs graphiques et texte. Par exemple, dans Adobe Photoshop.

La figure ci-dessus montre où dans le « Photoshop », vous pouvez définir un interlignage. Et spécifié paramètre suivant la taille de la police.

Exemples d'utilisation de la hauteur de ligne

En CSS, la distance entre les lignes peut être réglée pour cent. Un exemple illustratif est donné ci-dessous.

Dans le cas des petites valeurs de l'utilisateur de votre site sera peu pratique à lire.

La distance peut être variée et la taille de la police. Si la différence entre les paramètres de base varie considérablement en nombre, la différence est compensée par la principale augmentation.

subtilités de la conception

La distance entre les lignes CSS peut également personnaliser différents tirets. Prenons l'exemple de la figure.

Dans le dans ce cas « Element » sera le texte. Padding – remplissage est à l'intérieur de l'objet, et la marge – l'empreinte de l'objet. Border – ce cadre. Il peut être 0 pixels et peut être 100.

L'image suivante montre immédiatement toutes les marges, le cadre et la hauteur d'une ligne de texte.

Si vous avez un petit texte, le tout dans une seule ligne, ou chaque ligne dans un paragraphe distinct, la distance peut être réglée entre les paragraphes dentelées. C'est Maring et le rembourrage entre les lignes dans une cellule n'a aucun effet. Ils créent l'empreinte que sur les bords de l'objet. Object – ce paragraphe entier, au lieu de lignes en elle. Il est important de ne pas se confondre.

Dans les cas où un grand nombre de lignes, qui sont tous situés dans le même objet, la police est recommandé de modifier les paramètres de base.

Comment augmenter la distance entre les lignes de CSS

La distance entre les lignes de HTML, vous pouvez vous inscrire à une classe ou pour tous les paragraphes dans le texte. Si vous spécifiez comme ceci: p {line-height: 20px; } – alors absolument tous les paragraphes sur la page seront des chaînes de 20 pixels. Si vous voulez en différents endroits de différentes tailles, il est recommandé de procéder comme suit.

Nous prescrivons styles.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Pour plus de clarté, nous ajoutons un cadre, de sorte que vous pouvez voir que cela fonctionne. À l'avenir, il doit être retiré.

Ensuite, nous utilisons ces classes. Le résultat est le suivant.

Notez que dans le troisième cas, le groupe a conduit au texte. Tout en raison du fait que la taille de la police est supérieure à la hauteur de la ligne. Il est donc important de veiller à ce que de tels conflits ne sont pas. Si vous faites une petite hauteur de ligne, respectivement, de réduire la police.

Il est recommandé de ne pas faire trop peu de texte et une petite distance entre les lignes. Étant donné qu'aucun des utilisateurs ne seront pas en mesure de lire tout cela calmement. Il rapidement les yeux fatigués. Les moteurs de recherche disent aussi que le texte est convivial.

De plus, ces dernières années, l'accent est mis sur la facilité d'utilisation pour les utilisateurs mobiles. Là recommandations ont toujours dit que la taille de la police devrait être normal, pas petit. Surtout fortement affecte la référence. Avec leur petite taille, l'utilisateur sera difficile à utiliser la navigation du site.

Dans le moteur de recherche « Google » est un outil spécial qui aide à l'analyse. Il est très pratique pour les webmasters.

Voici un exemple des résultats qui peuvent être.

Il est recommandé d'utiliser ces conseils parce que ces critères influent sur les résultats de la recherche.