Sprechen Sie über das Verständnis des CSS-Attributrands

1. Was ist eine Marge?
Mit dem Rand wird die Abstände um Elemente herum gesteuert, wodurch der Zweck der Abstandsregelung visuell erreicht wird. Hat einen entsprechenden Rand relativ zum vorherigen Element. Wird zum Trennen von Elementen verwendet. Immer transparent.

2. Das Problem des Zusammenführens äußerer Ränder (siehe w3school) --- Prämisse: Das Element befindet sich im Dokumentfluss
2.1 Wenn zwei vertikale Ränder zusammentreffen, überlappen sich die Ränder in vertikaler Richtung und der endgültige Rand entspricht dem größeren der beiden Werte.
2.2 Wenn ein Element (ohne Ränder und Polsterung) ein anderes Element enthält, kommt es zu einer vertikalen Überlappung.
2.3 Wenn ein Element leer ist (ohne Ränder und), überlappen sich seine Ränder

3. Der Unterschied zwischen Rändern in Blockelementen und Inline-Elementen
Der Rand in Blockelementen betrifft die Ober-, Unter-, Links- und Rechtsseite von Blockelementen und kann beliebig gesteuert werden. In Inline-Elementen hingegen betrifft er nur die Elemente in horizontaler Richtung.
Hinweis: Bei austauschbaren Inline-Elementen wie „img“, „input“, „textarea“, „select“, „button“, „label“ usw. können Sie deren Breite und Höhe steuern und sie in „display: inline-block“ konvertieren. Daher kann der Rand auch nach oben, unten, links und rechts gesteuert werden.

4. Häufige Fehler im Zusammenhang mit Margen
4.1 IE6-Problem mit doppeltem Rand Beschreibung: Wenn das erste im übergeordneten Element enthaltene Element ein schwebendes Element ist, tritt das Problem mit dem doppelten Rand auf.
Lösung: display:inline
4.2 Problembeschreibung mit 3 Pixel Abstand zwischen schwebenden Elementen in iIE6: Ein schwebendes Element, das andere ist ein nicht schwebendes Element. Zwischen dem nicht schwebenden Element und dem schwebenden Element besteht ein Abstand von 3 Pixeln.

5. Der Unterschied zwischen Polsterung und Rand
Die Polsterung befindet sich innerhalb des Rahmens und hat die Hintergrundfarbe. Sie wird hauptsächlich verwendet, um Inhalt von Elementen zu trennen. Der Rand befindet sich außerhalb des Rahmens und hat keine Hintergrundfarbe. Er wird hauptsächlich verwendet, um Elemente voneinander zu unterscheiden und spielt eine isolierende Rolle.

6. Negatives Margenproblem der Marge (Fortsetzung folgt)
Die Verwendung negativer Ränder kann viele Probleme lösen.

Verweise
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.planabc.net/2007/03/18/css_attribute_margin/

<<: Detaillierte Erläuterung der grundlegenden Betriebsbefehle für Linux-Netzwerkeinstellungen

>>: Vue + Element dynamische Mehrfachheader und dynamische Slots

So gehen Sie mit der Meldung „Vorgang nicht zulässig“ beim Löschen von Dateien in Linux um

CSS entfernt die Hintergrundfarbe von Elementen, die beim Anklicken auf dem mobilen Endgerät generiert werden (empfohlen)

Füge im CSS-Style des Elements, welches die Hinte...

Sprechen Sie über das Verständnis des CSS-Attributrands

So gehen Sie mit der Meldung „Vorgang nicht zulässig“ beim Löschen von Dateien in Linux um

MySQL 8.0.20 Installations-Tutorial mit Bildern und Text (Windows 64-Bit)

Fragen zum Vorstellungsgespräch zu JS 9 Promise

Unterschied zwischen HTML ReadOnly und Enabled

js, um einen einfachen Drag-Effekt zu erzielen

Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?

Benutzerdefinierte Komponente der unteren Navigationsleiste des WeChat-Applets

Erstellen von responsiven E-Mails mit Vue.js und MJML

Beispiel für die reguläre Umschreibmethode für Nginx Rewrite (Matching)

Detaillierte Erklärung, wie zwei Node.js-Prozesse kommunizieren

Artikel empfehlen

So installieren Sie pyenv unter Linux

Tutorial zum Anzeigen und Ändern von MySQL-Zeichensätzen

MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte

Analyse und Lösung der MySQL-Verbindung, die den Fehler „Authentifizierung fehlgeschlagen“ auslöst

Ausführliche Erklärung der Closure in JavaScript

CSS entfernt die Hintergrundfarbe von Elementen, die beim Anklicken auf dem mobilen Endgerät generiert werden (empfohlen)

Lösung für das Problem mit transparenten Schriftarten nach dem Aktivieren von ClearType im Internet Explorer

Vergleich der Effizienz zwischen Einzeltabellenabfrage und Mehrtabellen-Joinabfrage in der MySql-Datenbank

Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys

So betreiben Sie eine MySql-Datenbank mit Gorm

Detaillierte Erklärung der Dreieckszeichnung und clevere Anwendungsbeispiele in CSS

vue+echarts realisiert den Flusseffekt der China-Karte (detaillierte Schritte)

So ändern Sie die Farbe der gesamten Zeile (tr), wenn die Maus in HTML stoppt

Implementierung von Check Constraints in MySQL 8.0

Lösung für den MySQL-Fehlercode 1064