Detaillierte Erläuterung der Verwendung von Texteinzug in CSS und des Unterschieds zwischen ihm und Auffüllen

Syntax:
text-indent : Länge

Parameter:

Länge : Prozentzahl | Bezeichner, negative Werte sind erlaubt. Siehe Längeneinheiten

Beschreibung:

Ruft den Einzug des Texts im Objekt ab oder legt ihn fest.
Dieses Attribut kann nicht innerhalb eines Objekts angewendet werden, das durch ein anderes Objekt (z. B. ) getrennt ist.
Die entsprechende Skriptfunktion ist textIndent. Bitte sehen Sie sich andere Bücher an, die ich geschrieben habe.

Beispiel:

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

So verwenden Sie text-indent in CSS
text-indent
bedeutet das Einrücken der ersten Textzeile , wie Einzug der ersten Zeile in Word
Zum Beispiel: Wenn Sie möchten, dass die erste Zeile eines Textes um 2 chinesische Zeichen eingerückt wird, beträgt die Schriftgröße dieses Textes 12 Pixel, fügen Sie
in
ein. Hier ist Ihr Text
Definition wie folgt
p{text-indent:25px;}

Was ist der Unterschied zwischen text-indent und padding in CSS?

text-indent hat keinen Einfluss auf die endgültige Breite des Elements, weist jedoch Kompatibilitätsprobleme auf. Padding wirkt sich auf die endgültige Breite in niedrigeren Versionen von IE, dem Mainstream-Browser, aus, jedoch nicht in Chrome und Firefox wirken sich auf die Breite aus, aber das Problem der inkonsistenten Anzeige in mehreren Browsern kann durch CSS-Reset gelöst werden, sodass sie letztendlich alle die Breite beeinflussen.
Der grundlegende Unterschied zwischen Texteinzug und Polsterung:
1. Polsterung basiert auf dem Box-Modell und gilt für Elemente auf Inline- und Blockebene
2 für den Inline-Schriftsatz und gilt nur für Elemente auf Blockebene. Der
Innenabstand der ersten Textzeile innerhalb des Elements auf Blockebene wirkt sich auf den Füllbereich auf der linken Seite des Inline-Felds oder Blockfelds aus wirken sich auf die Inhaltsbox aus und die untergeordneten Textknoten werden innerhalb der Inhaltsbox angezeigt, sodass der gesamte Text nach links verschoben wird.
23efcc05e98690ceeb219581933e4231 Als Beschriftung auf Inline-Blockebene wird sie in einer festen einzelnen Zeile angezeigt (und unterscheidet sich vom Leerraummechanismus. Der obige Unterschied besteht nicht).
Was ist also der Unterschied:
1. Text-indent basiert auf Inline-Schriftsatz, was zur Anwendung von Richtung führt: Nach rtl erscheint rechts der von text-indent bereitgestellte Einzug; padding -left wird von der Richtung nicht beeinflusst.
Natürlich wird das Richtungsattribut in 23efcc05e98690ceeb219581933e4231 nicht häufig verwendet.
2. Das Padding-Left basiert auf dem Box-Modell, daher wirkt sich das Box-Sizing-Attribut auf das Element aus zusammen mit den Attributen padding-left und width hat die endgültige Breite keinen Einfluss auf die Breite des Elements.
Dies ist sehr wichtig, da die Standard-Stylesheets von Webkit und Firefox die Box-Größe festlegen: border-box des Eingabeelements. Wenn Sie width und padding-left gleichzeitig festlegen, verringern sich Webkit/Firefox und IE Es wird ein großer Unterschied in der Breite angezeigt.
Daher müssen Sie bei Verwendung von padding-left die entsprechenden Stile von Webkit und Firefox zurücksetzen:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Texteinzug in CSS und des Unterschieds zwischen ihm und Auffüllen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!