Comment mettre en retrait du texte en CSS ?

Les propriétés du texte CSS définissent l'apparence du texte.

Indenter le texte

Indenter la première ligne d'un paragraphe sur une page Web, qui est l'un des effets de formatage de texte les plus couramment utilisés. (Apprentissage recommandé : Tutoriel d'introduction CSS)

CSS fournit l'attribut text-indent, qui peut facilement implémenter l'indentation de texte.

En utilisant l'attribut text-indent, la première ligne de tous les éléments peut être indentée d'une longueur donnée, même une valeur négative.

L'utilisation la plus courante de cet attribut est de mettre en retrait la première ligne d'un paragraphe. Les règles suivantes indenteront la première ligne de tous les paragraphes de 5 em :

p {text-indent: 5em;}

Remarque : Généralement, disons que text-indent peut être appliqué à tous les éléments de niveau bloc, mais l'attribut ne peut pas être appliqué aux éléments en ligne, et l'attribut text-indent ne peut pas non plus être appliqué aux éléments de remplacement tels que les images. Cependant, si un élément de niveau bloc (comme un paragraphe) a une image sur la première ligne, elle se déplacera avec le reste du texte de cette ligne.

Astuce : Si vous souhaitez « mettre en retrait » la première ligne d'un élément en ligne, vous pouvez utiliser un remplissage ou une marge gauche pour créer cet effet.

Utiliser des valeurs négatives

text-indent peut également être défini sur des valeurs négatives. En utilisant cette technique, vous pouvez obtenir de nombreux effets intéressants, tels que le "hanging indent", où la première ligne est suspendue à gauche du reste de l'élément :

p {text-indent: -5em;}

Mais lorsque vous définissez une valeur négative pour text-indent , vous devez faire attention, si vous définissez une valeur négative pour un paragraphe, une partie du texte de la première ligne peut s'étendre au-delà du bord gauche de la fenêtre du navigateur. Afin d'éviter ce problème d'affichage, il est recommandé de définir une marge supplémentaire ou un peu de remplissage pour l'indentation négative :

p {text-indent: -5em; padding-left: 5em;}

Utiliser une valeur en pourcentage

text-indent fonctionne Utilisez toutes les unités de longueur, y compris les valeurs en pourcentage.

Le pourcentage est relatif à la largeur de l'élément parent de l'élément en retrait. En d'autres termes, si vous définissez la valeur d'indentation sur 20 %, la première ligne de l'élément concerné sera indentée de 20 % de la largeur de son élément parent.

Dans l'exemple suivant, la valeur d'indentation est de 20 % de l'élément parent, soit 100 pixels :

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

Hérité

l'attribut text-indent peut être hérité, veuillez considérer la balise suivante :

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

Le paragraphe dans la balise ci-dessus sera également indenté de 50 pixels, car ce paragraphe hérite du div avec l'identifiant de inner La valeur d'indentation de l'élément.

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!