Detaillierte Erklärung des Unterschieds zwischen Rand und Polsterung in CSS

Dieser Artikel vermittelt Ihnen die grundlegenden Kenntnisse in CSS. Wir wissen, dass es in CSS einen Unterschied zwischen Rand und Auffüllung gibt. In CSS bezieht sich Rand auf den Abstand vom eigenen Rahmen zum Rand eines anderen Containers ist der Abstand außerhalb des Behälters. In CSS bezieht sich Padding auf den Abstand zwischen dem eigenen Rahmen und dem Rand eines anderen Containers in sich selbst, also dem Abstand innerhalb des Containers. Im Folgenden wird die allgemeine Verwendung von Polsterung und Rand erläutert.

1. Auffüllung

1. Syntaxstruktur

(1) Auffüllung-links:10px;(2) Auffüllung-rechts: 10px; rechte Polsterung

(3) Polsterung oben:10px; Polsterung oben

(4) Polsterung unten:10px; Polsterung unten: 10px ; einheitliche Polsterung auf allen vier Seiten

(6) Polsterung: 10px 20px; Polsterung oben, unten, links und rechts

(7) Polsterung: 10px 20px 30px; untere Polsterung

(8) Polsterung: 10px 20px 30px 40px; obere, rechte, untere, linke Polsterung

2. Die Länge gibt an Auffülllänge in bestimmten Einheiten

(2) % Die Länge der Auffüllung basierend auf der Breite des übergeordneten Elements

(3) automatisch Der Browser berechnet die Auffüllung

( 4) Inherit legt fest, dass das Padding vom übergeordneten Element geerbt werden soll

3. Probleme mit der Browserkompatibilität

(1) Alle Browser unterstützen das Padding-Attribut

(2) Beliebig Die IE-Version unterstützt den Attributwert „inherit“ nicht.

2. margin

1. margin-left: 10px ; >

(2) margin-right:10px; Rechter Rand

(3) margin-top:10px; Oberer Rand

(4) margin -bottom:10px; 🎜>

(5) Rand:10px; einheitliche Ränder auf allen vier Seiten

(6) Rand:10px 20px; oberer, unterer, linker und rechter Rand

(7) Rand : 10px 20px 30px; oberer, linker, rechter und unterer Rand

(8) Rand: 10px 20px 30px 40px; oberer, rechter, unterer und linker Rand

2. Möglicher Wert

(1) Länge gibt die Randlänge in bestimmten Einheiten an

(2) % Die Länge des Randes basierend auf der Breite des übergeordneten Elements

(3) automatisch Der Browser berechnet die Ränder

(4) inherit legt fest, dass die Ränder vom übergeordneten Element geerbt werden sollen

3. Browser-Kompatibilitätsprobleme

(1) Alle Browser unterstützen Margin Attribut

(2) Keine IE-Version unterstützt den Attributwert „inherit“

3. Der Unterschied zwischen Rand und Polsterung wird durch das Diagramm dargestellt:

Verwandte Empfehlungen:

HTML-CSS – Lernen über Rand und Polsterung

Eine kurze Diskussion zum Festlegen von Rand und Auffüllwerte als Prozentsätze Layout_html/css_WEB-ITnose

Analyse der Verwendung und häufiger Randprobleme in CSS

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen Rand und Polsterung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!