Comment se débarrasser de l'espace blanc en dessous de l'image avec div superposé position absolue

Question

J'utilise un div positionné en absolu sur une image. Le div a un fond coloré avec une opacité inférieure à 1 (donc vous pouvez voir l'image). Mon problème est que vous pouvez voir un espace blanc en dessous de l'image.

#zero { 
 
    max-width: 450px; 
 
    margin: 0 auto; 
 
} 
 

 
#container { 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#title { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0 bottom: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    color: white; 
 
    background-color: red; 
 
    opacity: 0.67; 
 
}

<div id="zero"> 
 
    <div id="container"> 
 
    <img src="450x300.jpg"> 
 
    <h2 id="title">Title</h2> 
 
    </div> 
 
    <p>How to get rid of the white space below the image?</p> 
 
</div>

Answer 1

Par défaut, une image est rendue en ligne, comme une lettre.

Vous pouvez ajuster l'alignement vertical de l'image pour la positionner ailleurs (par exemple, le milieu) ou modifier l'affichage afin qu'il ne soit pas en ligne.

Answer 2

Le titre a une hauteur de 100%, ce qui signifie qu'il prendra 100% de la hauteur de son parent. L'élément restant se chevauche alors.

Vous pouvez soit supprimer la directive height: 100% dans votre titre, en laissant la mise en page se définir automatiquement, soit spécifier un pourcentage inférieur et ajuster votre taille de police en conséquence.

#zero { 
 
    max-width: 450px; 
 
    margin: 0 auto; 
 
} 
 

 
#container { 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#title { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0 bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
    color: white; 
 
    background-color: red; 
 
    opacity: 0.67; 
 
}

<div id="zero"> 
 
    <div id="container"> 
 
    <img src="450x300.jpg"> 
 
    <h2 id="title">Title</h2> 
 
    </div> 
 
    <p>How to get rid of the white space below the image?</p> 
 
</div>