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

TheRedMarble · 01.10.2022

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);
}

Sempervivum · 06.10.2022

Das ist eine verzwickte Eigenschaft von CSS und nennt sich "collapsing margins". Wird hier ausführlich beschrieben:
https://wiki.selfhtml.org/wiki/CSS/...rgin#Zusammenfallende_Au.C3.9Fenabst.C3.A4nde
Und hier werden Methoden angegeben, wie man es unterbinden kann:
https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing
Ich empfehle von den vielen Varianten display:flex zu verwenden:

Code:

body {
    display: flex;
    flex-direction: column;
}

tk1234 · 06.10.2022

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.

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

TheRedMarble

New member

Anhänge

Sempervivum

Well-known member

tk1234

Active member

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

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