Ü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

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

Detaillierte Erläuterung mehrerer API-Beispiele, die häufig in der fortgeschrittenen JavaScript-Frontend-Entwicklung verwendet werden

Inhaltsverzeichnis MutationObserver API Merkmale ...

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

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

SQL-Übung: Produktkategorie-Datenoperation in der Online-Shopping-Datenbank

Responsive Webdesign lernen (1) - Bildschirmgrösse und prozentuale Nutzung bestimmen

Grundlegende Operationen an unsichtbaren Spalten in MySQL 8.0

Zusammenfassung der Spring Boot Docker-Verpackungstools

Zabbix überwacht die MySQL-Instanzmethode

Wie funktionieren die dynamischen Komponenten von Vue3?

Snake-Spiel mit nativem JS schreiben

Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind

Detaillierte Erklärung zur Installation und vollständigen Deinstallation von MySQL mit apt-get unter Ubuntu

Artikel empfehlen

Beispiele für die Erstellung eines MySQL-Datenbankkontos, Autorisierung sowie Datenexport- und -importvorgänge

Kennen Sie die Bedeutung von Sonderzeichen in URLs?

Kennen Sie alle 24 Methoden zur JavaScript-Schleifendurchquerung?

Erfahrungsaustausch zur MySQL-Slave-Wartung

Lassen Sie uns im Detail darüber sprechen, wie Browser Abschlüsse betrachten

Tutorial-Diagramm zur Installation von CentOS und Qt in einer virtuellen VMware-Maschine

Detaillierte Erläuterung mehrerer API-Beispiele, die häufig in der fortgeschrittenen JavaScript-Frontend-Entwicklung verwendet werden

Detaillierte Erklärung zur Verwendung der Stat-Funktion und des Stat-Befehls in Linux

Detaillierte Erklärung der For-Schleife und der doppelten For-Schleife in JavaScript

So lösen Sie das Problem des verstümmelten DOS-Fensters in MySQL

Vorgänge der Kommunikation zwischen Docker-Containern und der externen Netzwerkkommunikation

Detaillierte Erklärung des MySQL-Datenbankindex

Einführung und Installation von vue-cli

Erste Schritte mit MySQL Sharding

5 einfache XHTML-Webformulare für Webdesign