締切済み

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

  • すぐに回答を!
  • 質問No.9578706
  • 閲覧数31
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 67% (53/78)

無料ホームページテンプレート『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で設定するのだろうと思い、カテゴリを設定しましたが、違っていたらすいません。

回答 (全1件)

  • 回答No.1

ベストアンサー率 69% (867/1252)

他カテゴリのカテゴリマスター
とりあえず…

#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
お礼コメント
syosinsyasan

お礼率 67% (53/78)

お早い回答ありがとうございます。
まだ忙しくてできてはいないのですが、早速試してみます。
投稿日時 - 2019-01-21 15:08:49
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


OKWAVE若者応援スペシャル企画

ピックアップ

ページ先頭へ