html / CSS包装器没有完全包装的问题

Question

因为标题说我遇到了包装器没有正确包装内容但在底部留下一个小间隙的问题。

Image showing gap at bottom

HTML

exercise.js

CSS

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

感谢任何帮助！

Answer 1

默认情况下，您的图像会内嵌呈现，因此会被视为“p”，“q”等字母，这些字母需要在基线下方留出一些空间。您可以通过使图像块元素轻松解决此问题：

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