• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abstand zwischen Div und Bild entfernen

G

Gelöschtes Mitglied 36920

Guest
Hallo,
ganz oben auf meiner Seite soll ein Bild zu sehen sein, dass die Breite der Seite vollständig füllt. Das klappt auch soweit ganz gut.
Darunter soll sich dann die Navigatiionsleiste mit position: sticky befinden, sodass beim Scrollen zwar das Bild aber nicht die Navigation verschwindet.
Das funktioniert auch bis auf eine Kleinigkeit:
Zwischen Bild und dem div, in dem sich die Navigation befindet, ist ein etwa 5 Pixel großer Abstand.
Und das obwohl sowohl margin als auch padding gleich 0 sind.
Nun habe ich bereits das WWW durchforstet und zum Design des Bildes display: block hinzugefügt.
Das hat den Abstand allerdings nur auf einen Pixel reduziert.

HTML:
<body style="margin: 0px">
    <img src="Pfad/X/Y" alt="blabla" style="width: 100%; display: block">
    <div class="centered" style="background-color: black; height: 50px; width: 100%; align-items: center; position: sticky; top: 0">   
        <div class="centered" style="width: 30%;">
            <!-- Elemente der Navigation -->
        </div>
    </div>
    <!-- Seiteninhalt -->
</body>

CSS:
.centered{
    display: flex;
    justify-content:center;
}

Mir ist bewusst, dass man CSS eigentlich in eine eigene Datei schreibt. Hierfür war es so allerdings einfacher.
Wie vermutlich schon klar wurde bin ich eher Anfänger auf dem Gebiet.
Wie bekomme ich diesen Abstand nun ganz weg?
Danke schon mal für die Hilfe!
 
Werbung:
Bilder werden per default mit vertical-align: baseline; eingefügt... daraus ergibt sich nach unten dieser 5px 'Freiraum'.
Setze im CSS für Bilder vertical-align: bottom; dann sollte der Spalt weg sein.
 
Zurück
Oben