html/CSS完全にラップされていないラッパーに関する問題が発生しました

Question

タイトルには、内容を正しくラップしていないラッパーに問題があります。

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; 
} 

すべてのヘルプは歓迎です！

Answer 1

イメージはデフォルトでインラインでレンダリングされ、 "p"、 "q"などの文字として扱われ、ベースラインの下にスペースが必要です。

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