如何消除这些行之间的空隙？

Question

我正在做一个练习，在这里我创建了一个由4x3照片组成的网格。我已经通过删除HTML中的间距来消除行内照片之间的空白，但我似乎无法删除行之间的空白。有什么帮助吗？

https://codepen.io/benrichi/pen/MJgOze?editors=1100

HTML

<section id="section_photography">
    <h1>Photography</h1>
    <img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image">
</section>

CSS

#section_photography {
    width: 100vw;
    padding-top: 50px;
    background-color: aqua;
    clear: both;
    position: relative;
}

#section_photography h1 {
    text-align: center;
}

.photography_image {
    width: 25vw;
    margin: none;
    padding: none;
}

Answer 1

使用垂直对齐：

.photography_image {
    width: 25vw;
    margin: none;
    padding: none;
    vertical-align: bottom;
}

解释：图像是通过内联属性(默认)放置在基线上的，因此它们下面的空间是为字体下降器(g、j、p、q和y)保留的空间。vertical-align: bottom让他们坐在线框的底部。