28182 sujets

CSS et mise en forme, CSS3

Bonjour je ne comprend pas comment supprimer le petit espace qu'il y a entre mon image et ma nav bar ? le margin est à 0, pas de bordure ni de padding ?
Cà vient de ou ?



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
    *{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin:0;
    }
    
    nav ul{
        background-color: black;
    }

    li {
        display: inline-block;
        width:200px;
        font-size: 1.5em;
        padding:10px;
    }

    li a {
        color:white; 
        text-decoration: none;
    }

    img{
       width: 100%;
    }

    </style>
</head>
<body>

<img src="https://via.placeholder.com/1400x200" alt="placeholder">

  <nav>
      <ul>
          <li><a href="#">menu 1</a></li><!--
            --><li><a href="#">Menu 2</a></li><!--
            --><li><a href="#">Menu 3</a></li><!--
            --><li><a href="#">Menu 4</a></li><!---->
      </ul>
  </nav>
</body>
</html>
Modérateur
img est un element de type en ligne et repose sur l'interligne, tu peux faire : img {vertical-align:top; /* ou autre valeur qui te vas bien sauf baseline*/} ou un display:block.
Meilleure solution