これらの行の間のギャップを取り除く方法を教えてください。

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ラインボックスの下部に座らせてください。