Unerwarteter Zwischenraum

WebNeuling

Woher kommt der Freiraum unter den roten Buttons bis zum Ende der grauen Leiste?

Html Code:

HTML

<!DOCTYPE html>
<html lang="de" >
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, 
    maximum-scale=1.0, user-scalable=no">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <header>

        <div id="logo_banner"><img src=""></div>

        <nav>
        <ul>
        <li><a href="">Startseite</a></li>
        <li><a href="">B&uuml;ro</a></li>
        <li><a href="">Projekte</a></li>
        <li><a href="">Kontakt</a></li>
        </ul>
        </nav>
    </header>
</body>
</html>

Alles anzeigen

CSS Code:

Code

@import url('https://fonts.googleapis.com/css?family=Lato:300,400');




html, body {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}




header {
    margin: 1rem 0 1rem 0;
    width: 100%;
    height: 11rem;
}




header #logo_banner {
    background-color: #bebebe;
}




header #logo_banner img {
    display: block;
    margin: 0 auto;
}




nav {
  padding:0;
  background-color: #797979;
  text-align: center;
}




nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}




nav ul li {
    cursor: pointer;
    float:left;
    margin: 0;
    background-color: brown;
    min-width: 9.9rem;
    transition: background-color 0.5s;
}




nav ul li a {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: inline-block;
}




nav ul li:hover {
    background-color:#000000;
}

Alles anzeigen

Arne Drews

Der Header hat eine Höhe von 11rem, die Navi hat nur 9.9rem.
Ohne Kristallkugel würde ich tippen, dass der "Zwischenraum" ca. 1.1rem sind?!

voucher

So auf den ersten Blick sehe ich, dass der Header ein top margin von 1rem hat, könnte das daran liegen?

WebNeuling

Zitat von Arne Drews

Der Header hat eine Höhe von 11rem, die Navi hat nur 9.9rem.
Ohne Kristallkugel würde ich tippen, dass der "Zwischenraum" ca. 1.1rem sind?!

Wo steht denn, dass die Nav eine Höhe von 9.9 rem besitzt? Die Mindest-Breite der Listenelemente ist lediglich 9,9 ...

- - - Aktualisiert - - -

Zitat von voucher

So auf den ersten Blick sehe ich, dass der Header ein top margin von 1rem hat, könnte das daran liegen?

Schon ausprobiert, bringt leider keine Verbesserung mit sich.

Arne Drews

Zitat von WebNeuling

Wo steht denn, dass die Nav eine Höhe von 9.9 rem besitzt? Die Mindest-Breite der Listenelemente ist lediglich 9,9 ...

Stimmt... das min- habe ich überlesen, sorry.

Lad die Seite mal hoch und poste den Link, dann kann man mehr sagen.

MrMurphy

Hallo

Die Abstände kommen von

Code

nav ul {
   ...
   display: inline-block;
}

Alle inline-Elemente (damit auch inline-block-Elemente) bringen einen Mindestabstand nach rechts und nach unten mit sich.

Wenn du als Grundlage HTML5 verwendest solltest du auch die Möglickeiten von HTML5 nutzen. Zum Layouten ist deshalb Flexbox besser geeignet, zumal es nicht so viele Nebenwirkungen wie bei inline-Elementen oder der Verwendung von float mit sich bringt.

Gruss

MrMurphy

Tags