画像と見出しの間に余白を設定する

  • 解決済 zen73

    (@zen73)


    8年、 4ヶ月前

    下のように設定してみましたが，
    　　ア 画像と見出しがぴったりとくっついて余白が生じていない
    　　イ 見出しのデザインがくずれている
    というようになっています。

    style=”margin-bottom: 10px;”で指定する方法がまちがっているのだと思いますが，正しい方法をお教え願います。
    ――――――
    ｜　画像　 |
    ――――――　← ここに余白　　　
    ｜　見出し ｜
    ――――――


    <img class="alignleft wp-image-449 size-full" style="margin-bottom: 10px;"
    src="http://******/2016/05/accounts.jpg" alt="accounts" width="620" height="130" />
    <h3 class="tp3">あいうえお</h3>

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • Honda

    (@rocketmartue)

    8年、 4ヶ月前

    テーマのcssが分からないので、あくまで想像ですが、alignleftのcssにfloat: left;が指定されているのでは？
    もし、そうであればimgをdivで囲って、clearfixやpadding-bottom: 10px;等の指定をすれば、ア・イとも改善されると思います。

    <div class="clearfix pb10">
<img class="alignleft wp-image-449 size-full" style="margin-bottom: 10px;"
src="http://******/2016/05/accounts.jpg" alt="accounts" width="620" height="130" />
</div>
<h3 class="tp3">あいうえお</h3>

    cssの勉強をする場合、Google Chromeのデベロッパーツールを使うと、ブラウザ上でリアルタイムにcssが反映されるので便利です。
    chrome デベロッパーツール

    また、cssのルール等はネット上でも簡単に調べることができますので、自分が分かりやすいと思うサイトをブックマークしておくことをお勧めします。
    css リファレンス

    トピック投稿者 zen73

    (@zen73)

    8年、 4ヶ月前

    RocketMatureさん，ありがとうございます。
    cssリファレンスのご紹介ありがとうございます。
    　　次に改行時の字下げを考えていたのですが，すぐに見つけることができました。
    chromeデベロッパーツール
    　　firefoxの開発ツールを時たま使っていたのですが，こちらのほうが断然よさそうです。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「画像と見出しの間に余白を設定する」には新たに返信することはできません。