ディスカッション

  • Bachelor 3

    はじめてのCSS 5-2 で二つのdiv.boxがつながってしまうのはなぜでしょうか? 2つのdivのmarginは変わらずpadding-topがのびてしまうためでしょうか? 私の中のイメージですと、padding-topに大きい値を入れるとその分div.boxが下に下がるイメージですが、 正しくはどういう反応になるのでしょうか? 使用ブラウザはSafari 9.1.3です。

    投稿者: Qmin. 日付:2016/09/15 回答数: 1


  • Engineer 2

    キリレモ

    恐らくですが

    boxの上部に10px足すというイメージだと思います。
    なので緑のboxの「height」は100px+10px=110pxになっているようです。

    私も別の開発環境で試してみましたが「padding-top」で同じ事象が起き
    「padding-buttom」の場合は事象が起きませんでした。

    恐らく仕様のようですね。

    ちなみに「html」に「<br>」で無理やり改行を入れると間を開けられました。

    <div class="box"><p>Hello</p></div>
    <br>
    <div class="box"><p>World</p></div>

    こんな感じ。

    日付:2016/09/29


戻る