- 締切済み
floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> （<body>前、</body>後省略） ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。
- HTML
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
再現できました。 --- <style type="text/css"><!-- html, body, div, p {margin: 0; padding: 0;} div { background-color: #dfd; } p { margin: 10px; padding: 0; background-color: #fdd; } --></style> </head> <body> <!-- (1) --> <div><p>(1) 「"p の margin-left" + "p の border-block" + "p の margin-right"」が div の背景領域となる。</p></div> <!-- (2) --> <div><p style="border: solid 1px red;">(2) 「"p の margin-left" + "p の border-block" + "p の margin-right"」が div の背景領域となる。</p></div> <!-- (3) --> <div style="border: solid 1px black;"><p>(3) 「"p の margin-block"」が div の背景領域となる。</p></div> --- --- 14.2 背景 文書作成者は，要素の背景(すなわち，レンダリング面)を色又は画像のどちらかとして指定できる。 ボックスモデルに関しては，"背景"は，内容領域及びパディング領域の背景を表す。 http://www.y-adagio.com/public/standards/tr_css2/colors.html#q2 --- --- 10.3.3 通常のフローの中のブロックレベル非置換要素 'left'又は'right'の指定値が'auto'の場合は，その計算値は0とする。他の特性については，次の等式が常に成立しなければならない。 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含ブロックの幅 http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q6 --- --- 10.6.3 通常のフローにあるブロックレベル非置換要素及び浮動非置換要素 'top'，'bottom'，'margin-top'又は'margin-bottom'が'auto'である場合，計算値は0とする。 'height'が'auto'である場合，高さは，要素がブロックレベルの子供をもつかどうかに依存する。 要素が行内レベルの子供だけをもつ場合は，高さは，最上部の行ボックスの上辺から最下部の行ボックスの下辺までの距離とする。 要素がブロックレベルの子供をもつ場合は，高さは，最上部ブロックレベルの子ボックスの境界上辺から，最下部ブロックレベルの子ボックスの境界下辺までとする。 考慮するのは通常のフローにおける子供に限る。すなわち，浮動ボックス及び絶対位置決めボックスは無視され，相対位置決めされたボックスは，位置指定がないものとして考慮される。子ボックスが匿名ボックスであってもよい点に注意すること。 http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q17 --- CSS2 の仕様通り、background-color は padding-block を装飾します。 開発者ツールでメトリックをみると、border の有無で div の padding-block が変化していることがわかります。 (1), (2) は引用した通りの動作になっていますが、(3) の挙動はよくわかりません。どこをみればいいんだろう…。 8.1 ボックスの寸法 http://www.y-adagio.com/public/standards/tr_css2/box.html#box-dimensions 14.2 背景 http://www.y-adagio.com/public/standards/tr_css2/colors.html#q2 8.5 境界特性 http://www.y-adagio.com/public/standards/tr_css2/box.html#border-properties
- yyr446
- ベストアンサー率65% (870/1330)
こうすれば、よくわかると思います。 <p>のmarginだけで揃っています。 <style type="text/css"> html, body, div {margin:0px;} p {margin:10px;background-color:yellow;} div#wrap {width: 900px;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: right; width: 250px;} div#clear {background-color:#888;width: 900px;} .clear {clear:both;} .clear hr { display:none; } </style> <script type="text/javascript"> </script> </head> <body> <div id="wrap"> <div id="test01"><p>Pタグで囲まれた文章です。</p></div> <div id="test02"><p>左のPタグで囲まれた文章です。</p></div> <div id="test03"><p>右のPタグで囲まれた文章です。</p></div> <div class="clear"><hr></div> <div id="clear"><p>クリアした後のPタグで囲まれた文章です。</p></div> </div> </body> ※IEだと自動調整が勝手に働くので、元のCSSでも、おおかた揃ってます。
お礼
pタグの背景に黄色を敷いたものをこちらで確認いたしました、ありがとうございます。 Windows XPでのIE、FireFox、Chrome、Safari、Opera、それぞれ最新版にて確認しております。 状態は把握したのですが、質問内容である先頭のdivと、floatしたdivでpタグのmarginに表示に違いが出るのは何故でしょう？ 正確にはpタグのmargin-topとbottomの表示が異なっている、かと思います。 floatの仕様と言われればそれまでですが……。 ちなみに先程こちらでdivの境界線を見ようとして、 ========== div {border:1px solid #000;} ========== をCSSに付け加えてみました。 borderのピクセル分が増えてfloatを行ったdivが上下にズレたのはOKなのですが、今度は先頭のdivのmargin-topとbottom部分が白ではなく、指定した背景色（#EEE）が表示されるようになりました……何故なんでしょう……。 borderの指定を消すと、またmargin-topとbottomの10px分は白に戻りました。 私も引き続き試行錯誤してみます、素早いアドバイスありがとうございました。
お礼
それです、まさにその再現した状態です。 私なりに解釈をしてみました、誤っていたらご指摘を。 「10.6.3」の記述から、まずdivにheightを指定していないため、「要素であるpタグ内の高さ＝divの高さ」となり、pタグで指定したmargin（top、bottom）は要素外と見なされるためdivの外にはみ出る。 仮にmarginがpaddingであればpaddin領域を高さに含めるため、「pタグ内の高さ＋padding（top、bottom）＝divの高さ」となる。 そしてleftとrightの背景が残っているのは「10.3.3」の記述の通り、包含ブロックの幅に「margin-left」「margin-right」に含まれるため、leftとrightにはdivの背景が残る。 これがdivに対するmargin「topとbottom」と「leftとright」の表示結果の違いと解釈しております。 で、問題はおっしゃる通り（3）の状態ですね……borderやfloatなどをdivに適用した際に出る変化なんでしょうけども。 しかも変化しているのはpのmarginではなくdivのpaddingですか……ますます謎が……。 とりあえず（1）（2）の状態になる理由は把握できました。 リンク先の資料もブックマークしておきます、丁寧なご回答ありがとうございました。