Erklärung der CSS-Eigenschaft: padding

1. Die Beziehung zwischen Polsterung und Containergröße

　Für horizontale Blockelemente: ①Der Polsterwert ist verrückt, was sich definitiv auf die ②Breite auswirkt nicht automatisch, padding wirkt sich auf die Größe aus; ③width ist auto oder box-sizing ist border-box, und der padding-Wert wird nicht verrückt und hat keinen Einfluss auf die Größe.

Für horizontale Inline-Elemente: Die horizontale Auffüllung wirkt sich auf die Größe aus, die vertikale Auffüllung hat keinen Einfluss auf die Größe, sondern auf die Hintergrundfarbe. Wenn der vertikale Abstand zu groß ist, um den übergeordneten Container zu überschreiten, wirkt sich dies auf scrollHeight aus.

2. Negative Auffüllwerte und Prozentwerte

Über das Auffüllen negativer Werte: Auffüllen unterstützt keine Form von negativen Werten.

Bezüglich des Polsterungsprozentsatzes: Der Polsterungsprozentsatz wird relativ zur Breite berechnet.

Der Füllprozentwert von horizontalen Inline-Elementen: ① wird auch relativ zur Breite berechnet. ② Die Standardangaben für Höhe und Breite sind unterschiedlich.

3. Integrierte Auffüllung von Etikettenelementen

ol/ul-Liste: Das ol/li-Element verfügt über eine integrierte Auffüllung links, die Einheit ist jedoch nicht px em, wie Chrome-Browser Der Boden ist 40 Pixel groß. Wenn die Schriftgröße also klein ist, ist der Abstand groß, und wenn die Schriftgröße groß ist, wird die Sequenznummer aus dem Container kriechen. Wenig Erfahrung: Wenn die Textgröße 12-14 Pixel beträgt, ist der Wert für den linken Abstand von 22-25 Pixel angemessener.

Andere Elemente: ① alle Browser verfügen über integrierte Auffüllungen in Eingabefeldern/Textfeldern; ② alle Browser verfügen über integrierte Auffüllungen in Schaltflächen; ③ einige Browser verfügen über integrierte Auffüllungen In der Auswahl-Dropdown-Liste, z. B. in Firefox IE8+, kann die Auffüllung eingestellt werden. ④ Alle einzelnen Kontrollkästchen im Browser verfügen über keine integrierte Auffüllung. ⑤ Die Auffüllung von Schaltflächenelementen ist am schwierigsten zu steuern.

Schaltflächenauffüllung:

Verwenden Sie beim Erstellen von Schaltflächen das Tag 🎜>　

4. Polsterung und grafisches Zeichnen

　

5. Auffüllung und Layout

Verwenden Sie Prozenteinheiten, um eine Layoutstruktur mit festen Proportionen zu erstellen:

Mit Layout mit gleicher Randhöhe:

Zweispaltiges adaptives Layout:

Das obige ist der detaillierte Inhalt vonErklärung der CSS-Eigenschaft: padding. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!