html/CSS Probleme mit einem Wrapper, der nicht vollständig umwickelt

Question

So wie der Titel sagt, habe ich Probleme mit einem Wrapper, der den Inhalt nicht richtig einwickelt, sondern eine kleine Lücke am unteren Rand hinterlässt.

Image showing gap at bottom

html

<div id="newsContainer"> 
      <div class="wrapper"> 
       <img class="newsImage"src="Bilder/exempel320x320.jpg"> 
      </div> 
      <div class="wrapper"> 
       <img class="newsImage"src="Bilder/exempel320x320.jpg"> 
      </div> 
      <div class="wrapper"> 
       <img class="newsImage"src="Bilder/exempel320x320.jpg"> 
      </div> 
      <div class="wrapper"> 
       <img class="newsImage"src="Bilder/exempel320x320.jpg"> 
      </div> 
      <div class="wrapper"> 
       <img class="newsImage"src="Bilder/exempel320x320.jpg"> 
      </div> 
      <div class="wrapper"> 
       <img class="newsImage"src="Bilder/exempel320x320.jpg"> 
      </div> 
     </div> 

CSS

.newsImage { 
    transition: all .2s ease-in-out; 
    border: 1px solid black; 
} 
#newsContainer { 
    position: relative; 
    text-align: center; 
    margin-left: 8%; 
    margin-right: 8%; 
    margin-top: 90px; 
} 
.newsImage:hover { 
    transform: scale(1.2); 
    border: 1px solid orange; 
    cursor: pointer; 
} 
.wrapper { 
    display: inline-block; 
    overflow: hidden; 
} 

Jede Hilfe ist willkommen!

Answer 1

Ihre Bilder werden standardmäßig inline gerendert, also als Buchstaben wie "p", "q" usw. behandelt, die etwas Platz unter der Grundlinie benötigen. Sie können dies leicht beheben, indem Sie Ihre Bilder Blockelemente erstellen:

.newsImage { 
    display: block; 
    /* ... */ 
}