おそらく、pmesさんの質問のし方が、上手いのだと思います。

本来は、見出しがあって、その次にコンテンツ、というのが、HTML的には、オーソドックスなスタイルだろうと思われるので、そのレイアウトの方が良いのかもしれません。

それにしても、CSSでマージンの一括指定が上書きできない、ということに初めて遭遇しました。 ? 

さっそく、画像ブロックを組み直しました。

最終的に、こんな感じになりそうです。（画像添付）

今回、質問したことが解決できたばかりか、写真のこともそのまま貼り付ければいい！ということがわかり勉強になりました。

今日も、ありがとうございました。

いつも、本当に助かっています、おそらく私がWPを今回諦めずにできているのもleafytreeさんのおかげだと思っています。

私事ですが、10年前・７年前・５年前と過去に３回はWPに挑戦して、毎回初期設定などがわからず挫折した経験があります。

投稿者:: @pmes

あと、写真はそのまとま貼り付けても左に寄りました。教えてくださってありがとうございます！

必ず、左寄せ・中央・右寄せなど、どれか１つを選ばないといけないものだと思っていました。

私もローカルのテストサイトで試してみたのですが、画像ブロックの画像の配置で、どれか一つを一旦選択してしまうと、下の文字が回り込んでしまうようです。

なので、画像ブロックを再設定すれば、<div style="clear:both;"></div> は、要らなくなるかもしれません。

下の画像は、特になにもしていませんが、文字は回り込んでいません。

ありがとうございます！

少し狭くなりました。

私が<div style="clear:both;"></div>を使っているので

これが最小のスペースなのだと思います。

あと、写真はそのまとま貼り付けても左に寄りました。教えてくださってありがとうございます！

必ず、左寄せ・中央・右寄せなど、どれか１つを選ばないといけないものだと思っていました。

勉強になりました。

そして、そのまま左によった写真の下に文字を書いていっても、現状と同じぐらいのスペースだったので、これが限界なのかと思った次第です。

とりあえず、これでいきます！！！

いろいろありがとうございました。

私も、ちょっと、調べないと理由がわからない（知らないだけだと思いますが）のですが、以下のように書くと、上書きできるみたいです。

.article h4,
.article h5,
.article h6 {
   margin: 1em 0 1em;
}

なんでだろう？

単位がemとpxと解釈されちゃうのかな？

一括指定の方が詳細度が高いって、聞いたことないなぁ・・

こんばんは、いつも教えていただいてありがとうございます。

さきほど、教えていただいたコードをそのまま追加CSSに入れました。（画像参照）

追加の後で、実際の画面なども確認したのですが、変化がないようでした。

私の作業が間違っていますでしょうか？

.article h4,
.article h5,
.article h6 {
   margin-top: 1em;
}

をそのまま追加CSSに入れました。

投稿者:: @pmes

ただ、写真は左寄せをしていて、文字を周り込ませたくないために

下のように書いてます。

 

写真（左寄せ）

<div style="clear:both;"></div>

ちょっと、実際にやってみないとですが・・

写真は左寄せにしなくても、自然と左に寄るような気もするのですが、いかがでしょうか？

左寄せにしなければ、文字も回り込まないような気もするのですが・・

見出しのマージンを調整すれば、もう少し狭くできるかと思います。

現状では、以下のようになっているようです。

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
   margin: 2.4em 0 1em;
}

これは、上側のマージンが2.4em で左右が　0　で下側が1emという意味です。

今回お使いの見出しは、h4 ですので、h4 、h5 、h6 の上側のマージンを少なく指定すれば良いのではないかと思います。

.article h4,
.article h5,
.article h6 {
   margin-top: 1em;
}

一応 1em にしてみました。

あとは、お好みで適宜修正してみてください。

添付ファイルを見ていただきたいのですが、

写真とH４見出しの間のスペースが広すきて困っています。

それを狭くしたいのです。

ただ、写真は左寄せをしていて、文字を周り込ませたくないために

下のように書いてます。

写真（左寄せ）

<div style="clear:both;"></div>　←これが原因でスペースが広いのだとは思うのですが...

記事あああああああああ

どのようにすれば、写真と見出しのスペースがここまで広くならず、記事を回り込ませないように編集できますでしょうか？

ご存知の方がいらっしゃいましたら教えてくださいませ。

よろしくお願いいたします。

----------------------------------------------
サイト名：パラワン留学
サイトURL： https://www.pmes.jp
ホームURL： https://www.pmes.jp
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-ganchan01/style.css
WordPressバージョン：5.4.2
PHPバージョン：7.4.4
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.1.8
カテゴリ数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：797バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ： 
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Contact Form 7 5.2
EWWW Image Optimizer 5.6.0
TinyMCE Advanced 5.4.0
UpdraftPlus - Backup/Restore 1.16.26
WP Fastest Cache 0.9.0.8
Yoast Duplicate Post 3.2.5
----------------------------------------------