こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

<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で設定するのだろうと思い、カテゴリを設定しましたが、違っていたらすいません。

投稿日時 - 2019-01-17 17:09:21

QNo.9578706

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

とりあえず…

#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

投稿日時 - 2019-01-18 01:28:39

お礼

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

投稿日時 - 2019-01-21 15:08:49

あなたにオススメの質問