Diskussion über Standard-Rand- und Füllwerte allgemeiner Elemente

Diskussion über Standard-Rand- und Füllwerte allgemeiner Elemente

Heute haben wir die Frage besprochen, wie hoch der Randwert von Standardelementen in verschiedenen Browsern ist.


Code kopieren
Der Code lautet wie folgt:

// Body-Randwert
Firefox 20.0 ----------------------- Der Rand des Textkörpers ist: margin:8px 8px 8px 8px;
Internet Explorer 6.0 ----------- Der Textrand beträgt: margin:15px 10px 15px 10px;
Internet Explorer 7.0 ----------- Der Textrand beträgt: margin:16px 11px 16px 11px;
Internet Explorer 8.0-10.0 ---- Textrand ist: margin:16px 8px 16px 8px;
Opera 12.11 --------------------- Der Textrand ist: margin:16px 8px 16px 8px;
Safari 5.1 ------------------------- Der Textrand beträgt: margin:16px 8px 16px 8px;
Google Chrome 27.0 --------- Der Rand des Textkörpers ist: margin:16px 8px 16px 8px;

// Margenwert von h1
Firefox 20.0 ----------------------- Der Rand von h1 ist: margin:21px 0 22px 0;
Internet Explorer 6.0 ----------- Der Rand von h1 ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von h1 ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- der Rand von h1 ist: margin:20px 0 20px 0;
Opera 12.11 --------------------- Der Rand von h1 ist: margin:21px 0 21px 0;
Safari 5.1 ------------------------- Der Rand von h1 ist: margin:21px 0 21px 0;
Google Chrome 27.0 --------- Der Rand von h1 ist: margin:21px 0 22px 0;

// Margin-Wert von h2
Firefox 20.0 ----------------------- Der Rand von h2 ist: margin:20px 0 20px 0;
Internet Explorer 6.0 ----------- Der Rand von h2 ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von h2 ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- der Rand von h2 ist: margin:20px 0 20px 0;
Opera 12.11 --------------------- Der Rand von h2 ist: margin:19px 0 19px 0;
Safari 5.1 ------------------------- Der Rand von h2 ist: margin:19px 0 19px 0;
Google Chrome 27.0 --------- Der Rand von h2 ist: margin:20px 0 20px 0;

// Randwert von h3
Firefox 20.0 ----------------------- Der Rand von h3 ist: margin:19px 0 18px 0;
Internet Explorer 6.0 ----------- Der Rand von h3 ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von h3 ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- der Rand von h3 ist: margin:19px 0 18px 0;
Opera 12.11 --------------------- Der Rand von h3 ist: margin:18px 0 18px 0;
Safari 5.1 ------------------------- Der Rand von h3 ist: margin:18px 0 18px ;
Google Chrome 27.0 --------- Der Rand von h3 ist: margin:19px 0 18px 0;

// Randwert von h4
Firefox 20.0 ----------------------- Der Rand von h4 ist: margin:22px 0 21px 0;
Internet Explorer 6.0 ----------- Der Rand von h4 ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von h4 ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- der Rand von h4 ist: margin:22px 0 21px 0;
Opera 12.11 --------------------- Der Rand von h4 ist: margin:16px 0 16px 0;
Safari 5.1 ------------------------- Der Rand von h4 ist: margin:21px 0 21px 0;
Google Chrome 27.0 --------- Der Rand von h4 ist: margin:22px 0 21px 0;

// Randwert von h5
Firefox 20.0 ----------------------- Der Rand von h5 ist: margin:22px 0 22px 0;
Internet Explorer 6.0 ----------- Der Rand von h5 ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von h5 ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h5-Rand ist: margin:22px 0 22px 0;
Opera 12.11 --------------------- Der Rand von h5 ist: margin:22px 0 22px 0;
Safari 5.1 ------------------------- Der Rand von h5 ist: margin:22px 0 22px 0;
Google Chrome 27.0 --------- Der Rand von h5 ist: margin:22px 0 22px 0;

// Randwert von h6
Firefox 20.0 ----------------------- Der Rand von h6 ist: margin:25px 0 25px 0;
Internet Explorer 6.0 ----------- Der Rand von h6 ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von h6 ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h6-Rand ist: margin:25px 0 25px 0;
Opera 12.11 --------------------- Der Rand von h6 ist: margin:24px 0 24px 0;
Safari 5.1 ------------------------- Der Rand von h6 ist: margin:24px 0 24px 0;
Google Chrome 27.0 --------- Der Rand von h6 ist: margin:28px 0 28px 0;

// dl's Margin-Wert
Firefox 20.0 ----------------------- Der Rand von dl ist: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- Der Rand von dl ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von dl ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- der Rand von dl ist: margin:16px 0 16px 0;
Opera 12.11 --------------------- Der Rand von dl ist: margin:16px 0 16px 0;
Safari 5.1 ------------------------- Der Rand von dl ist: margin:16px 0 16px 0;
Google Chrome 27.0 --------- Der Rand von dl ist: margin:16px 0 16px 0;

// Randwert von dd
Firefox 20.0 ----------------------- Der Rand von dd ist: margin:0 0 0 40px;
Internet Explorer 6.0 ----------- Der Rand von dd ist: margin:0 0 0 40px;
Internet Explorer 7.0 ----------- Der Rand von dd ist: margin:0 0 0 40px;
Internet Explorer 8.0-10.0 ---- der Rand von dd ist: margin:0 0 0 40px;
Opera 12.11 --------------------- Der Rand von dd ist: margin:0 0 0 40px;
Safari 5.1 ------------------------- Der Rand von dd ist: margin:0 0 0 40px;
Google Chrome 27.0 --------- Der Rand von dd ist: margin:0 0 0 40px;

// ul's Randwert
Firefox 20.0 ----------------------- Der Rand von ul ist: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- Der Rand von ul ist: margin:19px 0 19px 40px;
Internet Explorer 7.0 ----------- Der Rand von ul ist: margin:19px 0 19px 40px;
Internet Explorer 8.0-10.0 ---- der Rand von ul ist: margin:16px 0 16px 0;
Opera 12.11 --------------------- Der Rand von ul ist: margin:16px 0 16px 0;
Safari 5.1 ------------------------- Der Rand von ul ist: margin:16px 0 16px 0;
Google Chrome 27.0 --------- Der Rand von ul ist: margin:16px 0 16px 0;

//Margin-Wert von ol
Firefox 20.0 ----------------------- Der Rand von ol ist: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- Der Rand von ol ist: margin:19px 0 19px 40px;
Internet Explorer 7.0 ----------- Der Rand von ol ist: margin:19px 0 19px 40px;
Internet Explorer 8.0-10.0 ---- der Rand von ol ist: margin:16px 0 16px 0;
Opera 12.11 --------------------- Der Rand von ol ist: margin:16px 0 16px 0;
Safari 5.1 ------------------------- Der Rand von ol ist: margin:16px 0 16px 0;
Google Chrome 27.0 --------- Der Rand von ol ist: margin:16px 0 16px 0;

// Füllwert von ul
Firefox 20.0 ----------------------- Die Polsterung von ul ist: padding:0 0 0 40px;
Internet Explorer 6.0 ----------- Die Polsterung von ul lautet: padding:0 0 0 0;
Internet Explorer 7.0 ----------- Die Polsterung von ul lautet: padding:0 0 0 0;
Internet Explorer 8.0-10.0 ---- die Polsterung von ul ist: padding:0 0 0 40px;
Opera 12.11 --------------------- Die Polsterung von ul ist: padding:0 0 0 40px;
Safari 5.1 ------------------------- Die Polsterung von ul ist: padding:0 0 0 40px;
Google Chrome 27.0 --------- Die Polsterung von ul ist: padding:0 0 0 40px;

// Füllwert von ol
Firefox 20.0 ----------------------- Die Polsterung von ol ist: padding:0 0 0 40px;
Internet Explorer 6.0 ----------- Die Polsterung von ol lautet: padding:0 0 0 0;
Internet Explorer 7.0 ----------- Die Polsterung von ol lautet: padding:0 0 0 0;
Internet Explorer 8.0-10.0 ---- die Polsterung von ol ist: padding:0 0 0 40px;
Opera 12.11 --------------------- Die Polsterung von ol ist: padding:0 0 0 40px;
Safari 5.1 ------------------------- Die Polsterung von ol ist: padding:0 0 0 40px;
Google Chrome 27.0 --------- Die Polsterung von ol ist: padding:0 0 0 40px;

// Randwert von p
Firefox 20.0 ----------------------- Der Rand von p ist: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- Der Rand von p ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand von p ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- Rand von p ist: margin:16px 0 16px 0;
Opera 12.11 --------------------- Der Rand von p ist: margin:16px 0 16px 0;
Safari 5.1 ------------------------- Der Rand von p ist: margin:16px 0 16px 0;
Google Chrome 27.0 --------- Der Rand von p ist: margin:16px 0 16px 0;

//Randwerte von thead, tbody, tfoot
Firefox 20.0 ----------------------- Die Ränder von thead, tbody und tfoot sind: margin:2px 2px 2px 2px;
Internet Explorer 6.0 ----------- die Ränder von thead, tbody, tfoot sind: margin: 2px 2px 2px 2px;
Internet Explorer 7.0 ----------- die Ränder von thead, tbody, tfoot sind: margin: 2px 2px 2px 2px;
Internet Explorer 8.0-10.0 ---- thead, tbody, tfoot Ränder sind: margin: 2px 2px 2px 2px;
Opera 12.11 --------------------- Die Ränder von thead, tbody und tfoot sind: margin:2px 2px 2px 2px;
Safari 5.1 ------------------------- Die Ränder von thead, tbody, tfoot sind: margin: 2px 2px 2px 2px;
Google Chrome 27.0 --------- thead-, tbody- und tfoot-Ränder sind: margin: 2px 2px 2px 2px;

// Randwert des Formulars
Firefox 20.0 ----------------------- Der Rand des Formulars ist: margin:0 0 0 0;
Internet Explorer 6.0 ----------- Der Rand des Formulars ist: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- Der Rand des Formulars ist: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- der Formularrand ist: margin:0 0 0 0;
Opera 12.11 --------------------- Der Rand des Formulars ist: margin:0 0 0 0;
Safari 5.1 ------------------------- Der Rand des Formulars ist: margin:0 0 0 0;
Google Chrome 27.0 --------- der Rand des Formulars ist: margin:0 0 0 0;

<<:  Eine kurze Einführung in die Unterschiede zwischen HTML und XHTML sowie HTML4- und HTML5-Tags

>>:  Implementierungsschritte für die Docker-Bereitstellung von SpringBoot-Anwendungen

Artikel empfehlen

Detaillierte Erklärung zum Anzeigen der MySQL-Speichernutzung

Vorwort Dieser Artikel stellt hauptsächlich die r...

Fallzusammenfassung zur Vue-Komponentenkommunikationsmethode

Inhaltsverzeichnis 1. Übergeordnete Komponente üb...

htm-Anfängerhinweise (unbedingt für Anfänger lesen)

1. Was ist HTML HTML (HyperText Markup Language):...

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

Installieren Sie vsftpd $ sudo apt-get installier...

Detailliertes Beispiel für Zeilensperren in MySQL

Vorwort Sperren sind Synchronisierungsmechanismen...

Beispiel für die Validierung eines JavaScript-Formulars

HTML-Formulare werden häufig verwendet, um Benutz...

Wettersymbol-Animationseffekt implementiert durch CSS3

Ergebnisse erzielen Implementierungscode html <...

Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

Viele Tabellen in MySQL enthalten Spalten, die NU...

MySQL-Transaktionsanalyse

Transaktion Eine Transaktion ist eine grundlegend...

MySQL-Einfügungsproblem bei JSON

MySQL 5.7.8 und höher unterstützt nun einen nativ...

So erstellen Sie eine Deep-Learning-Umgebung mit Python in einem Docker-Container

Überprüfen Sie die Virtualisierung im Task-Manage...

Kopieren von JS-Objekten (Deep Copy und Shallow Copy)

Inhaltsverzeichnis 1. Oberflächliche Kopie 1. Obj...