ブロックごとに隙間が空いてしまう

MUKO

PCで表示ですとそこまで気にならないのですが、スマホ表示にするとブロックごとに隙間が広く空いてしまい見栄えが悪くなってしまします。行間を詰める方法をご教授お願い致します。

<p><span style="font-size: 1em; letter-spacing: 0.05em;"><img class="size-medium wp-image-317 aligncenter" src="https://lovin-recruit.com/wp-content/uploads/2021/05/B55A39EB-78CD-3A9F-825E26E805255ACB-300x300.jpg" alt="" width="300" height="300" /></span></p>
<p><span style="font-size: 1em; letter-spacing: 0.05em;">[lp-h2 style="2"]</span><span style="font-size: 1em; letter-spacing: 0.05em;"> menu[/lp-h2]</span></p>
<!-- wp:columns {"className":"ath-colfix"} --><!-- /wp:columns -->
<div class="wp-block-columns ath-colfix">
<div class="wp-block-column">
<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><a href="https://lovin-recruit.com/001-2/"><img class="wp-image-51" src="https://lovin-recruit.com/wp-content/uploads/2021/05/01-3.jpg" sizes="(max-width: 150px) 100vw, 150px" srcset="https://lovin-recruit.com/wp-content/uploads/2021/05/01-3.jpg 300w, https://lovin-recruit.com/wp-content/uploads/2021/05/01-3.jpg 100w, https://lovin-recruit.com/wp-content/uploads/2021/05/01-3.jpg 150w" alt="" width="190" height="190" /></a></figure>
</div>
</div>
<div class="wp-block-column">
<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><a href="https://lovin-recruit.com/trivia"><img class="wp-image-53" src="https://lovin-recruit.com/wp-content/uploads/2021/05/02-3.jpg" sizes="(max-width: 150px) 100vw, 150px" srcset="https://lovin-recruit.com/wp-content/uploads/2021/05/02-3.jpg 300w, https://lovin-recruit.com/wp-content/uploads/2021/05/02-3.jpg 100w, https://lovin-recruit.com/wp-content/uploads/2021/05/02-3.jpg 150w" alt="" width="190" height="190" /></a></figure>
</div>
</div>
<div class="wp-block-column">
<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><a href="https://lovin-recruit.com/gallery/"><img class="wp-image-54" src="https://lovin-recruit.com/wp-content/uploads/2021/05/03-3.jpg" sizes="(max-width: 150px) 100vw, 150px" srcset="https://lovin-recruit.com/wp-content/uploads/2021/05/03-3.jpg 300w, https://lovin-recruit.com/wp-content/uploads/2021/05/03-3.jpg 100w, https://lovin-recruit.com/wp-content/uploads/2021/05/03-3.jpg 150w" alt="" width="190" height="190" /></a></figure>
</div>
</div>
</div>
<div class="wp-block-columns ath-colfix">
<div class="wp-block-column">
<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img class="wp-image-51" src="https://lovin-recruit.com/wp-content/uploads/2021/05/4-3.jpg" sizes="(max-width: 300px) 100vw, 150px" srcset="https://lovin-recruit.com/wp-content/uploads/2021/05/4-3.jpg 300w, https://lovin-recruit.com/wp-content/uploads/2021/05/4-3.jpg 100w, https://lovin-recruit.com/wp-content/uploads/2021/05/4-3.jpg 150w" alt="" width="300" height="150" /></figure>
</div>
</div>
<div class="wp-block-column">
<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><a href="https://lovin-recruit.com/blog/"><img class="wp-image-53" src="https://lovin-recruit.com/wp-content/uploads/2021/05/5-2.jpg" sizes="(max-width: 300px) 100vw, 150px" srcset="https://lovin-recruit.com/wp-content/uploads/2021/05/5-2.jpg 300w, https://lovin-recruit.com/wp-content/uploads/2021/05/5-2.jpg 100w, https://lovin-recruit.com/wp-content/uploads/2021/05/5-2.jpg 150w" alt="" width="300" height="150" /></a></figure>
</div>
</div>
</div>
<p>[metaslider id=307]</p>
<p>[playlist type="video" ids="325"]</p>

WordPressのバージョン :
ご利用のサーバー名 :
PHPのバージョン :
OS :
ご利用のブラウザ :
該当サイトのURL :

Ryota

@MUKO さん

ちょっとこれだけではどこをどう詰めていいのかわからないです。
カラムブロック毎にということでしょうか？

MUKO

この投稿が削除されました！

MUKO

@Ryota

お返事ありがとうございます！

はい！カラムブロック毎に行間をつめたいのと、画像の下にできる空白の行を埋めたいです。

Ryota

@MUKO さん

.cps-post-main .wp-block-column img {
    margin-bottom: 0;
}

カラムブロックに入っている全ての画像の余白を修正することになりますが、現状はこれが限界かもですね。。

MUKO

@Ryota

ご回答ありがとうございます。
こちら使わせていただきます。