<h3>タグと画像の隙間をなくしたい

質問

無料ホームページテンプレート『template party』（URL　https://template-party.com/db_template/?act=list&ord=1&kind=1&limit=100&html=list_all.html&top=0&page=2）の『tp_kids4_blue』というテンプレートを私用させてもらっています。

<h3>タグ（青い線で囲まれて表示されている）の下に画像を表示させた際に、隙間ができてしまいます。
この隙間をなくし、青い線と画像をくっつけて表示させたいです。
どのようにすればいいのか具体的に教えていただけると助かります。

よろしくお願いします。

多分CSSで設定するのだろうと思い、カテゴリを設定しましたが、違っていたらすいません。

回答No.1

4017B

とりあえず…

#main h3 + .my-img { margin-top: -20px; }

～上記、CSSを当該テンプレート用のCSSに追記して保存。で、表示させたい画像は<div>で囲っていた方が後々に修正やデザイン等が楽になるので、以下の様な感じのHTMLとして記述。

<h3>利用規約のご案内</h3>
<div class="my-img"><img src="test.jpg"></div>
<p>.....

基本的にはコレでお望みの様なデザインになるはず。もし上手くいかないのであれば、根本的な勘違いをしてるか、或いは他の要素が競合してる可能性があるため、実際のwebページを提示して貰わないとアドバイス不可。

P.S.
記法等の解説は下記リンク先の解説記事などを参考に勉強を進めてみてください。

- CSS3:セレクタの種類 http://www.htmq.com/csskihon/005.shtml

お礼

お早い回答ありがとうございます。
まだ忙しくてできてはいないのですが、早速試してみます。