Safari und Chrome lassen erste Zeile im Body frei, wenn <!DOCTYPE html> in der index.html steht

Diskutiere Safari und Chrome lassen erste Zeile im Body frei, wenn <!DOCTYPE html> in der index.html steht im HTML Forum im Bereich Programmierung; Guten Tag! Habe hier ein seltsames Phänomen. Ich habe immer im Body ganz oben eine weiße Zeile. Wie bekomme ich die weg? Wenn ich "<!DOCTYPE...
T

TheRedMarble

New member
Beiträge
1
Punkte Reaktionen
0
Guten Tag!

Habe hier ein seltsames Phänomen.

Ich habe immer im Body ganz oben eine weiße Zeile. Wie bekomme ich die weg?

Wenn ich "
Code:
<!DOCTYPE html>
" weglasse, dann verschwindet der weiße Abstand - dürfte aber nicht Sinn der Sache sein.

Grüße von der Murmel! :)

index.html
Code:
<!DOCTYPE html>
<html lang="de">

    <head>
       
        <!-- Browsertitel -->
        <title>Hello Java World!</title>
       
        <!-- Umlaute -->
        <meta charset="utf-8" />
   
        <!-- Stylesheet -->
        <link rel="stylesheet" type="text/css" href="styles.css" />
       
        <!-- Externe Javascript-Datei -->
        <script language="javascript" type="text/javascript" src="index.js"></script>
       
    </head>

    <body>
       
        <div class="mainContainer">

            <h1>Hallo Java Welt!</h1>

            <button name="btnJsAction" onclick="btnJavaScriptAction()">Hier klicken</button>

            <p id="javaScriptAction">Diese Zeile ändert sich beim Klick auf den Button</p>
           
        </div>
   
    </body>
   
</html>

index.js
Code:
function btnJavaScriptAction() {
    document.getElementById("javaScriptAction").innerHTML = "Der Button wurde gedrückt!";
}

styles.css
Code:
@import url('https://fonts.googleapis.com/css2?family=Raleway:[email protected];200&display=swap');

:root {
    --myFont: Raleway;
    --myWeightHeadlines: 100;
    --myWeightTexts: 200;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

.mainContainer {
    height: 100%;
    background-image: linear-gradient(90deg, #f4fa58 0%, #dba901 100%);
}

h1 {
    font-family: var(--myFont);
    font-weight: var(--myWeightHeadlines);
}

p {
    font-family: var(--myFont);
    font-weight: var(--myWeightTexts);
}
 

Anhänge

  • erste-zeile-frei.png
    erste-zeile-frei.png
    2,8 MB · Aufrufe: 5
  • brackets.png
    brackets.png
    422,4 KB · Aufrufe: 3
Zuletzt bearbeitet:
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
T

tk1234

Active member
Beiträge
33
Punkte Reaktionen
2
Das Forum entwickelt definitiv ein Eigenleben: der Thread ist von letztem Samstag und taucht erst jetzt wieder auf. Am Samstag war er kurz (wie lange weiß ich nicht mehr) sichtbar, als ich antworten wollte war er aber wieder weg - er muss aber die ganze Zeit existiert haben, die ID des Threads ist vor der ID eines Threads vom Sonntag.

Die Abstand oben kommt von dem standardmäßig vorhandenen margin-top von h1, auf das Thema collapsing margins hat dich Sempervivum ja schon hingewiesen.
 
Thema:

Safari und Chrome lassen erste Zeile im Body frei, wenn <!DOCTYPE html> in der index.html steht

Oben Unten