Forum : probleme de marge

Bonjour, j'ai un souci avec une margin buttom qu ireste sous mes elements

le code html

<header> 
    <nav>
        <div class="topzest"> 
            <img src="website/banniere.png" alt="">
       </div>
      <div>
        <img src="website/sousbanniere.png" alt="">
      </div>

le css

.topzest{
    width: 1280px;
    height: 384px;
    margin: 0;
    padding: 0;
    display: block;
}

la marge fait 4,5 px et malgré avoir mis les dimensions de la photo utilisée dans le CSS
l'inspecteur me donne les dimensions de 1280x388,5 sur la photo.
du coup impossible de coller ma barre de menu sous la photo
et idem sous la barre de menu il y'a encore une large de 4,5 px
qui apparait ensuite entre tous les elements que je rajoute.

MERCI !!!

Alex1os

Salut! Ces petits espaces viennent souvent du fait que l'image est inline. Je mets display:block et reset le margin du body, et le gap disparaît. En faisant ces modifications, je me suis souvenu que j'avais regardé récemment le cours eth eur via https://paybis.com/fr/eth-to-eur/ — ça donne un petit plaisir de vérifier les chiffres tout en jouant avec le CSS.

Alainpre

Tu peux aussi essayer overflow:hidden;
Cela donne parfois de bon résultats.

oxymoron

Ajoute simplement une de ces lignes dans ton CSS :

Option 1 — Transformer l’image en bloc
img {
display: block;
}
=> Cela supprime l’espace sous l’image, car elle n’est plus considérée comme un élément en ligne.
C’est la solution la plus propre dans ton cas.
Option 2 — Supprimer l’espace en agissant sur l’alignement
img {
vertical-align: bottom;
}
=> Cela garde les images en ligne mais aligne leur bas avec la ligne de base du texte, ce qui supprime aussi l’espace indésirable.
Recommandation

Pour ton exemple précis :
.topzest img {
display: block;
width: 1280px;
height: 384px;
margin: 0;
padding: 0;
}
Et tu peux aussi vérifier que tes <div> n’ajoutent pas de marges par défaut (mais elles n’en ont pas normalement).
Résultat attendu

Ta barre de menu et tes éléments suivants seront collés directement sous la bannière, sans l’espace de 4,5 px.
Ton image s’affichera exactement à 1280 × 384 px, comme prévu.
Geometry Dash

probleme de marge

3 réponses