画像とその下にあるテキストの隙間を小さくする方法

質問

ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。

管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。

これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。

この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。

また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。

画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。

回答No.3

naokita

#2さん同様ですが、Chrome以外でも最近のブラウザなら F12キー の検証ツールで該当するコンテンツのレイアウトを見る事ができるので、原因がわかるでしょう。

まずは、画像とテキストがインライン内での改行なのか？
ブロックで分かれているのか？判断する事。

例１：
<p><img ～～><br>テキスト</p>
上記のようなインライン要素内なら、line-height:0; にする。

例２：
<p><img ～～></p>
<p>テキスト</p>
ブロックならimg以外にもブロック要素のmarginやpaddingを0にする必要があります。

また、CSSには優先度があって、貴方の指定を最優先にしないと上書きされません・・・

そのサイトを直で検証しないと誰にもわかりません・・・
わからなければ、
#1さんのようにネガティブマージンで強引にマイナスする方法もありますねｗ

お礼

ご回答ありがとうございます。

FirefoxでもF12で検証できますね。
例１と例２の違いよくわかりました。

最初は例２にしていたので、上下に大きく空いていました。

それで、例１に変更しました。
floatを使って画像を右または左に寄せています（最初は右寄せにしていたのですが、テキストが左に寄るので左寄せのほうが見栄えがよいと思いました）

<p><img ～～><br />テキスト</p>
だと<br />が入っている分、上下に大きく空いてしまうんですよね。
なので、<br />は入れないようにしています。

また、<p>に「line-height:0;」を設定してもなぜか反映してくれません。

でも、今のままでもかなり狭くなっていますのでこれでよいと思っています。

回答No.2

nana_coco

こんにちは。

ブラウザのグーグルクローム「Google Chrome」はお使いでしょうか？

CSSの場所や原因を突き止めるには、要素を検証が便利です。

試しにグーグルクロームでそのサイトを表示させ、

その画像あたりにカーソルを乗せて、右クリック「要素を検証」を選ぶと

画面下半分に、その画像のHTMLと右側に指定されたCSSが表示されます。

詳しくは「クローム 要素を検証」で検索して勉強してみてください。

人が構築したCSSをいじるには要素を検証が絶対といって言いほど必要です。

まずは画像を囲ってるDIVあたりにマージンが無いか。

キャプションにマージンが無いか。

その辺を要素を検証で探して見てはどうでしょうか。

お礼

ご回答ありがとうございます。
Google Chromeの「要素を検証」でいろいろ出てきましたので、
ちょっと複雑ですが確認してみたいと思います。

回答No.1

noname#217950

ワードプレスについてよく知りませんので的外れでしたらすみませんね。
ソースを見たわけではありませんので何が原因か確証はありませんが、marginを0にしても変化が出ないという事はmarginによる余白ではないのではないでしょうか？画像配置エリアとしてdivなどでimgが囲われていませんか？そこにpaddingがあるとか、あるいはエリアのwidthやheightが固定されていて画像の高さとの差が余白になっているとか？または、テキスト自体がtop : 500pxみたいに絶対配置されていたり…まあ、なにを言っても憶測ですが…

いろんなCSSの指定が干渉してしまってなかなか思う様にいかないケースもあるかもしれません。最悪、テキストにmargin-top : -200pxなどと好きな値でネガティブマージンを指定すれば余白はなんとか埋まるのではないでしょうか？

でも、ネガティブマージンはちょっとムリヤリ感がありますので、できればスマートにmarginが効かない理由がわかるといいですね。

お礼

ご回答ありがとうございます。
ワードプレスには元々いろんなスタイルが設定されていますので、それが影響しているのかもしれません。
今それを探しているのですが、該当する部分がなかなか見つからないため質問させていただきました。
もしかしたら同じような現象に遭遇して解決したことがある人がいないかなと思ったので・・・。