Kopfzeilenrand nirgends angegeben

Question

Ich habe ein merkwürdiges Problem. Ich habe eine einfache Web-Seite, und aus irgendeinem Grund die <h1 /> Tag ist mit einer margin-top y margin-bottom von über 18px. Es gibt nichts in meiner *.css-Datei, die dies vorgibt. Firefox Firebug zeigt mir den Stil, der angewendet wird, aber es gibt keinen Rand irgendwo.

Auf dem Bild ist die div in der sich der Kopftext befindet (oder befinden soll), hat die Grenzen. Der Überschriftstext wird jedoch durch den Rand nach unten gedrückt.

Was könnte die Ursache dafür sein? Gibt es irgendwo in Firefox/Firebug einen Hinweis darauf, woher der Stil GENAU stammt? Es sagt, dass die header Tag geerbt von der body Stil, aber das ist nur das:

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

Irgendwelche Ideen? Vielen Dank im Voraus.

Answer 1

Kopfzeilen haben oft standardmäßig einen Rand. Versuchen Sie, ein Stylesheet zum Zurücksetzen/Normalisieren zu verwenden.

Reset- oder Normalisierungs-Stylesheets setzen Ihre Stile in allen Browsern auf eine Standard-Basislinie zurück. Der Unterschied zwischen Zurücksetzen und Normalisierung besteht darin, dass beim Zurücksetzen Ränder, Auffüllungen usw. entfernt werden, während bei Normalisierungs-Stylesheets sinnvolle Standardwerte angewendet werden.

Diese Links sollten von Nutzen sein:

• https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
• Reset Reloaded
• normalize.css

Answer 2

Das ist das Standard-Styling für <h1> s. Ähnlich verhält es sich mit der Tatsache, dass <h1> s haben eine größere Textgröße als Absätze. Das ist nur die Standardeinstellung. Sie kann auch überschrieben werden.

Answer 3

Die meisten Browser fügen einige Standard margin y padding .

Versuchen Sie das Zurücksetzen der margin , etwa so

body{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
    margin:0;    /*  ADD THIS  */
}

Sie können ihn auch über die h1

Answer 4

Alle Browser haben ein Standard-CSS, das auf alle Seiten angewendet wird.

Verwenden Sie etwas wie Yahoos CSS zurücksetzen um alle angewendeten Stile aufzuheben.