Explication détaillée de l'utilisation de text-indent en CSS et de la différence entre celui-ci et le remplissage

Syntaxe :
text-indent : length

Paramètres :

length : Pourcentage | Une valeur de longueur composée d'un nombre à virgule flottante et d'une unité identifiant , les valeurs négatives sont autorisées. Voir Unités de longueur

Description :

Récupère ou définit le retrait du texte dans l'objet.
Cet attribut ne peut pas être appliqué dans un objet qui est déconnecté par un autre objet (tel que ).
La fonctionnalité de script correspondante est textIndent. Veuillez consulter les autres livres que j'ai écrits.

Exemple :

div { text-indent : -5px; } 
div { text-indent : underline 10%; }

Comment utiliser text-indent en CSS
text-indent
signifie mettre en retrait la première ligne de texte , comme Indentation de la première ligne dans un mot
Par exemple : Si vous souhaitez que la première ligne d'un texte soit indentée de 2 caractères chinois, la taille de police de ce texte est de 12px, mettez
dans
Voici votre text
définition Comme suit
p{text-indent:25px;}

Quelle est la différence entre text-indent et padding en CSS ?

text-indent n'affecte pas la largeur finale de l'élément mais présente des problèmes de compatibilité. Le remplissage affecte la largeur finale dans les versions inférieures d'IE, le navigateur grand public, mais pas dans. chrome et Firefox affectent la largeur, mais le problème d'affichage incohérent dans plusieurs navigateurs peut être résolu via la réinitialisation CSS, de sorte qu'ils affectent tous la largeur à la fin.
La différence fondamentale entre le retrait de texte et le remplissage :
1 Le remplissage est basé sur le modèle de boîte et est applicable aux éléments en ligne et au niveau du bloc
2. sur la composition en ligne et n'est applicable que pour les éléments de niveau bloc, la première ligne de texte
le remplissage sera appliqué à la zone de remplissage gauche de la boîte en ligne ou de la boîte de bloc, ce qui affectera la zone de contenu, et le Les sous-nœuds de texte apparaîtront à l'intérieur de la zone de contenu, donc tout le texte sera décalé vers la gauche.
23efcc05e98690ceeb219581933e4231 En tant qu'étiquette de niveau bloc en ligne, elle est affichée sur une seule ligne fixe (et elle est différente du mécanisme d'espace blanc. La différence ci-dessus n'existe pas).
Alors, quelle est la différence :
1. Text-indent est basé sur la composition en ligne, ce qui entraîne l'application de direction : après rtl, l'indentation fournie par text-indent apparaît à droite ; padding -left n'est pas affecté par la direction.
Bien sûr, l'attribut direction n'est pas couramment utilisé dans 23efcc05e98690ceeb219581933e4231
2. Le padding-left est basé sur le modèle de boîte, donc l'attribut box-sizing affectera l'élément avec les attributs padding-left et width la largeur finale text-indent n'affectera jamais la largeur de l'élément.
Ceci est très important car les feuilles de style par défaut de webkit et Firefox définiront le box-sizing: border-box de l'élément d'entrée Si vous définissez la largeur et le padding-left en même temps, webkit/firefox et IE sont inférieurs. des versions apparaîtront. Une grande différence de largeur.
Par conséquent, lorsque vous utilisez padding-left, vous devez réinitialiser les styles correspondants de webkit et Firefox :

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!