Seltsame Marge oben auf Seite

Question

Ich bin in den frühen Phasen des Aufbaus einer Website für eine Renovierung Firma, aber ich habe eine seltsame Formatierung Problem. Oben auf der Seite befindet sich ein Rand, der eine Lücke zwischen der Kopfzeile und dem oberen Rand des Browsers erzeugt. Die Seite ist here. Ich habe das Padding auf der Seite bereits initialisiert, daher bin ich mir nicht sicher, was es verursacht.

Bei einer anderen (vielleicht verwandten) Notiz werden die CSS-Stile nicht korrekt auf die Seiten angewendet. Es sieht auf meinem Brackets-Server korrekt aus, aber die Kopfzeile hat nicht die richtige Größe und es fehlt das Hintergrundbild, und die Navigationsleiste ist nicht korrekt positioniert.

Dies ist, wie es aussehen sollte:

Answer 1

Es ist wahrscheinlich, margin collapsing der "Welt der Fenster" Text an der Spitze. Wenn auf diesem Element ein Rand oben ist, blutet dieser Rand oben wahrscheinlich außerhalb des Containers.

Ich würde empfehlen, den oberen Rand zu entfernen und stattdessen padding-top auf dem übergeordneten Container zu verwenden, wenn Sie dort Platz benötigen.

Wenn es keine Grenze, Klotzen, Inline-Inhalt, erstellt block_formatting_context oder Spiel des margin-top eines Block vom Rand-Spitze seines ersten Child-Blockes oder ohne Rahmen, Klotzen, Inline-Inhalt zu trennen, height, min-height oder max-height, um den unteren Rand eines Blocks vom unteren Rand des letzten untergeordneten Elements zu trennen, dann werden diese Ränder reduziert. Der reduzierte Rand endet außerhalb des übergeordneten Elements.

Answer 2

Verwenden CSS die Marge zu setzen.

h1 {margin-top:0px;} 

Answer 3

In Zeile 27 von styles_desktop.css haben Sie alle Ihre Header-Tags mit einem Rand-Top von 10px gesetzt.

Dafür wird Ihre "World of Windows" -Kopfzeile 10px vom oberen Rand der Seite nach unten geschoben.

Answer 4

Set Polsterung Außen div:

header { 
    padding-top: 1px; 
} 

Es passiert, wenn Sie margin-top auf innere div eingestellt, wenn äußere div hat keine padding-top.