ブロック同士の上下の間隔を無くすか詰める

3mcdtさん、こんにちは。

簡単に調べたところ、画像ブロックの<figure class="wp-block-image">自体に

.wp-block-image {
    margin: 0 0 1em;
}

が指定されていますので、その下のブロックとの間に 1em のスペースができるようです。

また、画像ブロックにキャプションを追加した場合、<figcaption>タグは<figure>タグの内部に配置されるので、この影響を受けていないようです。なお、画像ブロックにキャプションを追加した場合、

.wp-block-image figcaption {
    margin-top: .5em;
    margin-bottom: 1em;
}

と、画像との間は 0.5em のスペースとなるようですね。

これらを踏まえて対応可能な方法としては、
１．<figure>タグの margin を打ち消す。
２．<figcaption>タグのテキストを左寄せにする。
などが考えられますが、

背景色を自由に選べません。

があるので、１の方が適切でしょうかね。

テーマカスタマイザーの追加CSSで指定するなら、

.wp-block-image {
	margin-bottom: 0;
}

を追加で対応可能ですが、すべてのページの画像に影響しますので、該当ページにのみ適用するのであれば適切に書き換えてください。

ご参考になれば。

@3mcdt さん、こんにちは。

まずは追加CSSにそのまま転記してみて問題なく適用されましたか？
であれば、考え方は非常によろしいと思います。

page-id-1738 .wp-block-image {
margin-bottom: 0;
}

body classを使う考え方は正しいので、classの指定の仕方だけですね！

.page-id-1738 .wp-block-image {
	margin-bottom: 0;
}

class指定をするときはドット（ . ）が必要ですね。
これで、class page-id-1738 配下の class wp-block-image が使用されているタグとなります。

CSSはそれほど難しくありません、これを機に少し学んでみることをお勧めいたします。
ご参考になれば。

3mcdtさん、こんにちは。

これは検証ツールで調べたという事でしょうか？私も結構調べたつもりだったのですがこれが分かりませんでした。

そうですね、まずは調べたいページを表示している状態で F12 キーを押してデベロッパーツールを起動します。現在の最新のブラウザであれば同じ操作で同様のツールが表示されるはずです。

で、例えば Chrome の場合、調べたい場所、今回は画像のキャプション部分だと思いますが、そこを右クリックして「検証」をクリックすると、デベロッパーツールの Elements タブにその場所のソースコードが表示されると思います。

デベロッパーツール上の調べたいタグをマウスで合わせてみると、表示されているページの該当箇所にもマーキングがされますので、どこのタグがどの表示を担っているかわかりますね。
さらに、例えばページで色が変わっている場所の上下にオレンジ色に変わっている箇所が表示されていれば、そこに Padding や Margin が設定されていますので、デベロッパーツールの Styles タブを見てみれば、該当箇所にどのような CSS が当たっているかわかると思います。

該当箇所をよく調べて、それよりも親のタグに何らかの指定がないかなど、順に調査していけば分かることもあるはずです。なかなか分からないこともありますｗ

ご参考になれば。