- 締切済み
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分は白に戻りました。 私も引き続き試行錯誤してみます、素早いアドバイスありがとうございました。
関連するQ&A
- floatしたdiv内の要素について
下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか？ どうすれば消えますか？ ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }
- 締切済み
- CSS
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- floatタグの使い方
FOM出版 WEBクリエイター検定 初級のテキスト問題で分からないことがあります。 詳しいかたお力をおかしください。 htmlファイルの記述ーーー（少し簡略化してます） <!DOCUTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"> <p>古代の七不思議</p> </div> <div class="right"> <p>古代の七不思議</p> </div> </body> </html> CSSの記述ーーー .left{color:#000000; background-color:#cccc99; padding:10px; margin-left:10px; width:300px; float:left; } .right{color:#000000; background-color:#cccc99; padding:10px; margin-left:350px; width:300px; } これが正解のようで、クラスleftの右にクラスrightが回り込みます。 しかし僕にはクラスrightに記述したmargin-left:350px;がよく分かりません。 divタグでボックスを二つ創ってあるので、.leftにfloat:left;の記述をして .rightが回り込んで.rightにmargin-left:10px;記述とかで隙間が開くのだと思っていました。 ちなみに.rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。これもよくわかりません。 つたない文章で分かりづらいかもしれませんが、どうか解説をお願いいたします。 よろしくお願いします。
- ベストアンサー
- HTML
- <P>タグと<div>タグについて
<P>タグと<div>タグには“前後に空行が入るかどうか”という違いがあるそうですが、下記のようなデータを作り、自分のホームページに記入したところ、前後に全く空行が入りませんでした。 しかし、自分のホームページ以外で、このデータを試してみたところ、<p>タグにはきちんと空行が入るようです。 記入する場所によって、空行が入ったり入らなかったりするのは、なぜなのでしょうか？ ※ブラウザはIE8を使用しています。 <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div>
- 締切済み
- その他（インターネット・Webサービス）
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
- IE6とFirefoxの表示の違い
どうか教えてください。 IE6とFirefoxでの表示結果が違うのですが、同じにするには どうすればいいのですか？ Firefoxでは文字の背景色の赤が上下にでてるし、IE6は左のボックスが 下にくっついているし、それと、A Bにかけた margin:10px;なのですが、10pxマージンとれてますかね？ よろしければ教えてください。 【html】 <body> <div id="container"> <div id="A"> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> <div id="B"> <p>ああああああああああああああああああああああああああああああ</p> </div> </div> </body> 【CSS】 body{ font-size:20px; } #container{ background:#000; width:600px; overflow:auto; } #A{ float:left; width:200px; background:#ff0000; margin:10px; } #B{ width:200px; float:right; background: #ff0000; margin:10px; }
- 締切済み
- CSS
- 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- HTML
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- div入れ子、親でmarginを設定すると子のmarginは反映されない？
段組みレイアウトでdivが 入れ子になってています。 外側が <div id=wrap> <div id=main> <div id=form> </div> </div> </div> #wrap{ width: 840px; margin-top: 0px; margin-right: auto; margin-bottom: 15px; margin-left: auto; } #main { width: 582px; float: right; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10; } #form { width: 562px; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 20; } としてあります。 id=formのmargin-left :20; だけがブラウザで反映されず、 flort:right;で右に寄せて左に20pxあけました。 id=mainもflort:right;で右に寄っているだけだったようです。 divを入れ子に使う場合、 親でmarginを設定したら、子のmarginは反映されないのでしょうか？
- ベストアンサー
- HTML
お礼
それです、まさにその再現した状態です。 私なりに解釈をしてみました、誤っていたらご指摘を。 「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）の状態になる理由は把握できました。 リンク先の資料もブックマークしておきます、丁寧なご回答ありがとうございました。