Comment définir l'espacement CSS-tutoriel CSS-php.cn

Comment définir l'espacement CSS

醉折花枝作酒筹

Libérer： 2023-01-07 11:45:28

original

9804 Les gens l'ont consulté

Méthode de paramétrage : 1. Utilisez l'attribut letter-spacing pour définir l'espacement des mots, la syntaxe "letter-spacing : pixel size" ; 2. Utilisez l'attribut line-height pour définir l'espacement des lignes, la syntaxe "line-height". : taille des pixels".

Comment définir l'espacement CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

1. Définir l'espacement des mots en CSS :

Utilisez l'attribut d'espacement des lettres pour définir l'espacement des mots. La propriété

letter-spacing augmente ou diminue l'espace entre les caractères (espacement des caractères).

Cette propriété définit la quantité d'espace insérée entre les zones de caractères de texte. Étant donné que les glyphes de caractères sont généralement plus étroits que leurs zones de caractères, la spécification d'une valeur de longueur ajuste l'espacement habituel entre les lettres. Par conséquent, la valeur normale équivaut à une valeur de 0.

Remarque : les valeurs négatives sont autorisées, ce qui rapprochera les lettres.

Valeur d'attribut :

par défaut normal. Ne spécifie aucun espace supplémentaire entre les caractères.

length définit un espace fixe entre les caractères (les valeurs négatives sont autorisées).

inherit spécifie que la valeur de l'attribut d'espacement des lettres doit être héritée de l'élément parent.

Exemple :

<html>

<head>
<style type="text/css">
p.p1 {letter-spacing: -0.5em}
p.p2{letter-spacing: 20px}
</style>
</head>

<body>
<p class="p1">我的公主殿下</p>
<p class="p2">臣来迟了</p>
</body>

</html>

Copier après la connexion

Effet :

Comment définir lespacement CSS

2. CSS définit l'espacement des lignes

Nous pouvons utiliser l'attribut line-height pour définir la distance entre les lignes (hauteur de la ligne).

Remarque : les valeurs négatives ne sont pas autorisées.

Explication

Cet attribut affectera la disposition de la zone de ligne. Lorsqu'il est appliqué à un élément de niveau bloc, il définit la distance minimale entre les lignes de base dans cet élément plutôt que la distance maximale.

La différence calculée entre la hauteur de ligne et la taille de police (appelée « espacement des lignes » en CSS) est divisée en deux moitiés et ajoutée en haut et en bas d'une ligne de contenu texte. La plus petite boîte pouvant contenir ce contenu est une boîte de ligne.

La valeur numérique d'origine spécifie un facteur de mise à l'échelle, et les éléments descendants hériteront de ce facteur de mise à l'échelle au lieu de la valeur calculée.

Valeur d'attribut :

valeur normale par défaut. Définissez un espacement raisonnable des lignes.
number définit un nombre, qui sera multiplié par la taille de police actuelle pour définir l'espacement des lignes.
length définit un espacement de ligne fixe. Interligne en % pourcentage basé sur la taille de police actuelle.
inherit spécifie que la valeur de l'attribut
line-height doit être héritée de l'élément parent.

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span {
                font-size: 20px;
                line-height: 2em;
            }
        </style>
         
    </head>
    <body>
        <span>
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
        </span> 
    </body>
</html>

Copier après la connexion

Effet :

Comment définir lespacement CSS