Über die Überlappung von Randwert und vertikalem Rand in CSS

Rand paralleler Boxen (Überlappung doppelter Ränder) – Interviewfrage: Wenn eine Box einen oberen Rand und die andere Box einen unteren Rand hat, gibt es dann ein Randüberlappungsproblem? Lösung: Nehmen Sie den größeren Wert, nicht die Summe ihrer Werte, sondern den mit dem größeren Wert.

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8"/>
    <Titel></Titel>
    <style type="text/css">
    *{Rand: 0;Padding: 0;}
    .box1,.box2{
    Breite: 200px;
    Höhe: 200px;    
    }
    .box1{
    Hintergrundfarbe: #f90;
    Rand unten: 20px;
    }
    .box2{
    Hintergrundfarbe: Aqua;
    Rand oben: 50px;
    }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
</body>
</html>

Rand und Polsterung haben im Uhrzeigersinn dieselbe Ausrichtung und denselben Wert (oben, rechts, unten, links). Klicken Sie hier, um „Polsterung und Abkürzungen für das CSS-Boxmodell“ anzuzeigen.

Dies ist das Ende dieses Artikels über Randwerte und vertikale Randüberlappungen in CSS. Weitere Informationen zu Rändern und vertikalen Randüberlappungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: TypeScript verwendet vscode, um den Codekompilierungsprozess zu überwachen

>>: HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Über die Überlappung von Randwert und vertikalem Rand in CSS

Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet

So lösen Sie das Problem „Unbekannte Spalte ‚Passwort‘ beim Zurücksetzen des MySQL-Root-Passworts

Anwendungsbeispiele für die MySQL-Volltextsuche

Docker löst das Problem, dass das Terminal kein Chinesisch eingeben kann

Beispiel für eine erzwungene Konvertierungsmethode für MySQL-Zeichenfolgen

Zwei Methoden zum Deaktivieren von Formularsteuerelementen in HTML: schreibgeschützt und deaktiviert

Detaillierte grafische Erläuterung der MySql5.7.18-Zeichensatzkonfiguration

So verwenden Sie JS WebSocket zur Implementierung eines einfachen Chats

Detaillierte Erklärung des Server-ID-Beispiels bei der MySQL-Master-Slave-Synchronisierung

Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt

Artikel empfehlen

Modularität in Node.js, npm-Paketmanager erklärt

Detaillierte Erläuterung der erweiterten Konstruktionseigenschaften von Vue

Rendern im Vue-Scaffolding verstehen

Detailliertes Tutorial zur Installation der komprimierten Version von MySQL 8.0.11 unter Win10

Zusammenfassung der zehn häufigsten Probleme bei MySQL-Indexfehlern

Eine kurze Analyse der Verwendung von USING und HAVING in MySQL

Prozessdiagramm zum Aufbau des Linux RabbitMQ-Clusters

Mybatis-Statistiken zur Ausführungszeit jeder SQL-Anweisung

So erstellen Sie einen SVN-Server unter Linux

Was ist BFC? So löschen Sie Floats mithilfe von CSS-Pseudoelementen

Verwendung regulärer Ausdrücke in CSS-Selektoren

So installieren Sie die Yum-Quelle und laden die Befehle rz und sz unter CentOS7 hoch und herunter (mit Bildern)

Das WeChat-Applet realisiert ein Verknüpfungsmenü

Detaillierte Erklärung des Synchronisierungsmodifikators von Vue

Upgrade des Windows Server 2008R2-Dateiservers auf Windows Server 2016