Ich nahm eine Seite, deren DTD HTML4 Transitional war, und änderte den Doctype in <!DOCTYPE html> und extra Leerzeichen erschien zwischen dem h1 und div darunter. Ich habe keine anderen Änderungen an Markup oder CSS vorgenommen.
JSFiddle-Beispiel: Ссылка .
Wenn Sie den Doctype von HTML5 in HTML4 Transitional ändern, sehen Sie, dass der zusätzliche Platz erscheint und verschwindet, obwohl Markup und CSS genau gleich sind.
Irgendeine Idee, wie man diesen Raum loswerden kann?
Der HTML 4.01-Übergangsdoctype bewirkt den Modus "Fast Standard" in Browsern. Der HTML5-Doctype verursacht den Standardmodus.
Dieser Microsoft-Artikel erklärt den Unterschied: Ссылка .
Für den Modus "Fast Standards" heißt das:
Inline-Elemente tragen genau dann zur Zeilenhöhe bei, wenn eines der Folgendes ist wahr.
Wenn das Element:
Enthält Textzeichen
Hat eine Breite ungleich Null
Hat einen von Null verschiedenen Rand
Hat eine von Null verschiedene Auffüllung
Hat ein Hintergrundbild
Hat eine vertikale Ausrichtung auf einen anderen Wert als Baseline festgelegt
Beachten Sie, dass ein Zeilenumbruch dafür nicht als Textzeichen betrachtet wird Definition, es sei denn, es ist der einzige Inhalt einer Zeile. In diesem Fall, Die Zeilenhöhen bleiben die oberste Inline - Box - Oberseite und die unterste Inline-Box unten auf der Linie, unabhängig von der angegebenen Zeilenhöhe.
Wenn ein img-Element der einzige Inhalt einer Tabellenzelle ist, die Zeilenbox Höhe der Höhe der Zellenlinienbox wird auf Null eingestellt.
Am kritischsten ist in Ihrem Fall, dass die Berechnung der Höhe der Zeile, die das Bild enthält, nicht die strut , ein imaginäres Inline-Element, das die Zeilenhöhe auf den Zeilenhöhenwert des h1 -Elements erhöhen sollte.
Diese jsfiddle zeigt ein echtes span -Element mit einem als echten Textinhalt, der für den Strut steht, und Sie können sehen, dass das Layout mit einem HTML 4.01 Transitional Doctype und einem HTML5 Doctype identisch ist.
Diese jsfiddle zeigt die gleiche Idee, nur diesmal wird die Strebe mit CSS wie folgt erstellt:
%Vor% Im Fall von khurrams Antwort reduziert er die Linienhöhe von h1 , und im Standardmodus ist die Höhe der Strebe kleiner als die Höhe des Bildes. Dies bedeutet, dass die Höhe der Linie als Ganzes von der Höhe des Bildes und nicht von der Höhe der Strebe bestimmt wird. Die Höhe des Bildes ist in beiden Standards und fast im Standardmodus gleich. Sie sehen also keinen Unterschied im Rendering zwischen den Modi.
Warum das Einstellen der Zeilenhöhe von h1 auf die Höhe des Bildes (25px) nicht funktioniert, aber auf 12px setzt, liegt daran, dass die Strebe nicht nur einen oberen und einen unteren Rand bildet, aber auch eine Grundlinie für die Linie. Die Grundlinie ist etwas oberhalb des unteren Bereichs, um Textunterlängen zu ermöglichen, für Text mit normaler Größe, der normalerweise etwa 3 Pixel beträgt. Das Bild befindet sich standardmäßig auf der Grundlinie, so dass die Lücke zwischen der Grundlinie und der Unterseite zur Höhe des Bildes hinzugefügt wird, um die Höhe der Linie festzulegen.
Dies kann gelöst werden, indem Sie das Bild von der Grundlinie entfernen, indem Sie img { vertical-align: top } verwenden, was in diesem jsfiddle angezeigt wird . Wenn Sie hier an der h1-Zeilenhöhe basteln, werden Sie sehen, dass Werte größer als 25px den Abstand zwischen den Zeilen erhöhen, aber Werte von 25px oder weniger ändern diesen Abstand nicht.
Ihr Fehler behandelt die Standard-Zeilenhöhe.
Der HTML4-Übergang ignoriert den Inhalt Ihrer H1-Zeilenhöhe und ergibt ein 25-Pixel-hohes Element. Der HTML5 berücksichtigt die Zeilenhöhe des H1-Tags, was 29px entspricht.
Deshalb hat die HTML5-Boilerplate einen CSS-Reset.
Du kannst das div auch auf margin: 0; padding: 0; setzen, aber du musst für jedes Element tun, bis du alle getroffen hast. Die Antwort auf den CSS-Reset von Meyer in diesem Thread ist korrekt.
Hier ist ein Beispiel für die Problemumgehung: Ссылка