HTML-Element soll oberen Seitenrand bzw. Rand des darüber liegenden Elements berühren, aber es entsteht ein Abstand

  • CSS

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    HTML-Element soll oberen Seitenrand bzw. Rand des darüber liegenden Elements berühren, aber es entsteht ein Abstand

    Es ist vermutlich was ganz simples, aber ich stehe derzeit total auf dem Schlauch. Ich habe eine, ich sage mal so, "Box", die ich ans obere Ende der Seite setzen möchte, d. h. von ganz oben bis zu dieser Box soll kein Abstand entstehen. Weiterhin soll das darunter liegende Element keinen Abstand zur oberen Box haben.

    In zwei bereits vorhandenen Websites habe ich das hinbekommen, aber ich finde im CSS-Code einfach nicht die Stelle, die relevant ist.

    Hier der Code (HTML und CSS), darunter ein Link zu JSFiddle zum direkten Ausprobieren:

    HTML-Quellcode

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Test</title>
    6. </head>
    7. <body>
    8. <header>
    9. <nav id="topnav">
    10. <ul>
    11. <li><a href="/">Test</a></li>
    12. </ul>
    13. </nav>
    14. </header>
    15. <main>
    16. <article>
    17. <p>Text</p>
    18. </article>
    19. </main>
    20. </body>
    21. </html>

    CSS-Quellcode

    1. #topnav {
    2. background-color: #3f4961;
    3. text-align: center;
    4. width: 100%;
    5. font-size: 2em;
    6. font-weight: 700;
    7. }


    Link: jsfiddle.net/6sgjLtfe/

    Die erste Box ist header, die zweite main.

    Wer kann mir auf die Sprünge helfen?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Moin,

    Schuld sind die Margins vom ul und p.

    Wenn du die auf 0 setzt, „kleben“ die Elemente direkt hintereinander.

    CSS-Quellcode

    1. ul, p {
    2. margin: 0; /* Oder entsprechend -top und -bottom. */
    3. }
    Mit freundlichen Grüßen,
    Thunderbolt

Facebook
Telefonspende