Wie kann ich Platz über dem Header entfernen?

Question

Ich erstelle eine Website. Ich habe den HTML-Teil geschrieben und jetzt schreibe ich das Stylesheet. Aber es gibt immer etwas Platz in meinem Header. Ich kann es nicht entfernen. Jede Hilfe wäre willkommen. Danke im Voraus. Mein HTML- und CSS-Code ist unten angegeben.

<header> 
<h1>OQ Online Judge</h1> 
<form action="<?php echo base_url();?>/index.php/base/si" method="post"> 
    <label for="email1">E-mail : </label><input type="text" name="email" id="email1"> 
    <label for="password1">Password : </label><input type="password" name="password" id="password1"> 
    <input type="submit" name="submit" value="Login"> 
</form> 
</header> 

Dies ist mein HTML-Code.

body{ 
margin: 0px; 
padding: 0px; 
} 
header{ 
margin: 0px; 
padding: 0px; 
height: 20em; 
background-color: #C0C0C0; 
} 

Dies ist mein CSS-Code.

Answer 1

Versuchen:

h1 { 
    margin-top: 0; 
} 

Sie sehen die Auswirkungen von margin collapsing.

Answer 2

Try margin-top:

<header style="margin-top: -20px;"> 
    ... 

Edit:

Nun fand ich relative Position wahrscheinlich eine bessere Wahl:

<header style="position: relative; top: -20px;"> 
    ... 

Answer 3

Es ist gute Praxis, wenn Sie Website Beginn der Erstellung zurücksetzen alle Ränder und Polsterungen. Daher empfehle ich beim Start nur auf einfache do:

* { margin: 0, padding: 0 } 

Diese Margen und Polsterungen aller Elemente machen 0, und dann können Sie sie Stil, wie Sie wollen, da jeder Browser einen anderen Standard Marge und Polsterung der Elemente.

Answer 4

Es ist wahrscheinlich der h1 Tag, der das Problem verursacht. Die Anwendung von margin: 0; sollte das Problem beheben.

Aber Sie sollten ein CSS-Reset für jedes neue Projekt verwenden, um Browserkonsistenzen und Probleme wie Ihres zu beseitigen. Die wohl berühmteste ist Eric Meyers: http://meyerweb.com/eric/tools/css/reset/

Answer 5

Um unerwartete Margen und andere browserspezifische Verhalten in der Zukunft zu verhindern, würde ich empfehlen, reset.css in Ihre Stylesheets aufzunehmen.

Beachten Sie, dass Sie die Schriftgröße und -gewichtung h [1..6] so einstellen müssen, dass die Überschriften danach wieder wie Überschriften aussehen und viele andere Dinge.

Answer 6

Ich löste das Leerzeichen Problem durch Hinzufügen eines Rahmens und Entfernen ist durch Festlegen einer negativen Marge. Ich weiß nicht, was das zugrunde liegende Problem ist.

header { 
    border-top: 1px solid gold !important; 
    margin-top: -1px !important; 
} 

Answer 7

Nur der Vollständigkeit halber, Ändern overflow-auto/hidden sollte auch den Trick.

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
header { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 20em; 
 
    background-color: #C0C0C0; 
 
    overflow: auto; 
 
}

<header> 
 
    <h1>OQ Online Judge</h1> 
 

 
    <form action="<?php echo base_url();?>/index.php/base/si" method="post"> 
 
    <label for="email1">E-mail :</label> 
 
    <input type="text" name="email" id="email1"> 
 
    <label for="password1">Password :</label> 
 
    <input type="password" name="password" id="password1"> 
 
    <input type="submit" name="submit" value="Login"> 
 
    </form> 
 
</header>

Answer 8

Diese CSS erlaubt Chrome und Firefox alle anderen Elemente auf meiner Seite normalerweise und entfernen Sie den Rand über meinem h1-Tag zu machen. Auch wenn eine Seite in der Größe geändert wird, kann sie besser funktionieren als px.

h1 { 
    margin-top: -.3em; 
    margin-bottom: 0em; 
}