• 締切済み

CSS 入れ子になった子要素のmargin-top

添付画像の上図のように、入れ子になっている子要素のmargin-topを指定すると、下図のように親ボックスも一緒に指定したpx分動いてしまうのは「上下マージンの相殺」になるのでしょうか？ この場合どのmarginとどのmarginが相殺されてこうなるのか初心者にわかりやすく教えていただけないでしょうか？？ 外側のボックスにpadding又はborderを設定する必要があるみたいですが、いまいち理解できません。 どうかよろしくお願い致します。

画像を拡大する
  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

垂直方向のマージンは、親コンテナ要素にpaddingやborderが指定されている場合は、親要素の内寸からになります。それらが指定されていない場合は先出のマージンが指定されている要素の間で計算されます。 　⇒8.3.1 マージンの相殺 ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#collapsing-margins ) 　の後半

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • [CSS]marginとpaddingについて

    ブログのCSSを編集しています。 marginとpaddingの違いがいまいち分かっていなかったので、いろいろなCSS講座サイトを見て回ったのですが、少し混乱して来ました…。 自分なりに以下のような結論を出したのですが、何か問題はありますでしょうか。 ■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。 ■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。 ■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので) ■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので) ネガティブマージンは使用しません。 また、各エリアやテキストに、ボーダーと背景色は使用していません。 表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。(統一した方が気持ち良いので) この解釈で合っているか、教えてもらえると助かります。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • tbody要素に削除出来ないマージンが入る

    table要素の thead要素及びtbody要素についてですが この2つの要素は内部的に margin: 2px; が指定されたような感じになっています。(firebugなどで確認) つまり、上下左右にマージンが2px自動的に入ってます。 もちろん、table要素とtbody要素には、margin及びpadding及びborderは0を設定しています。 このマージンのようなものを取り去りたいのですが margin : 0px;などとしてもこのマージンのようなものを取り去ることは出来ませんでした。（ツールでみると、マージン及びパッディングは０なので当たり前ですが） table要素を使う限り、この2pxというものは自動的に挿入され、CSSでは取り去ることは無理なのでしょうか？ 回避策としては、margin: -2px;で回避することは可能みたいなのですが そもそもどうしても2pxが入ってしまうのか、またそれがなぜCSSで設定出来ないようになっているのか 疑問に思っています。 これは、firefox3.6(firebug) 及び ie8(開発ツール)で確認しました。 分かりにくい説明かもしれませんが宜しくお願いします。

    • ベストアンサー
    • 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
  • firefoxにおけるmargin-topの表示について【CSS】

    教えてください。とても困っています。 下記のようなCSSがあります。 #big { margin: 0px; padding: 0px; width: 150px; background: #000000; height: 150px; } #small { margin: 5px; padding: 0px; height: 140px; width: 140px; text-align: center; background: #FFFFFF; } これをｈｔｍｌで次のようにします。 <div id="big"> <div id="small"> </div> </div> これでしたら、IEのほうでは、bigの中にきちんと#smallが収まっていて、 #smallのマージンも上下左右きちんと5pxずつ取られていて、 結果的に見た目は#smallの周りに黒い5pxの枠（#big）があるような四角が出来上がります。（自分的に意図したのがこの形です） ですが、firefoxで見ると、なぜか#smallのtopのマージンだけうまく反映されてなくて #bigにmarginが反映されてしまうようになります。 結果的に、#smallの周りに出来るはずの5pxの枠は左右はきちんとできるのですが、 下に10pxの黒枠が出来て、上には枠は出来ず、#bigごと5px下に下がったような形になります。 どのようにしたら、firefoxでもちゃんとしたtop-marginの表示が出来るのでしょう？ (=IEのように表示できるのでしょうか？） ちなみに、#bigか#smallにfloatで右か左を設定したら、IEでもfirefoxでも キレイな形になります。 ただ、この方法が正しいのかわからなくて。 ご存知の方がいらっしゃいましたら、教えていただけますか？

    • ベストアンサー
    • HTML
  • 【css】marginについて質問です。

    現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 （一部だけ抜粋しています） 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all> 　　　<div id=container> 　　　</div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか？教えてください。

  • marginを指定した見出し要素の後に段落要素をつけるとmarginが変なことになります。

    CSSとHTMLでホームページを作っています。 ですがなぜかIEの表示のみ、妙な表示になります。 <h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します（IEのみ）。 この対策法を教えていただけないでしょうか？ ソース（一部を抜粋、少し書き換え）は HTMLは4.01 Traditional（DTDあり）で、 <h3 class="st">ABOUT</h3> <p> ここは×××の管理する、・・・・サイトです。<br> ●●はメインからどうぞ。 </p> <h3 class="st">Update Log</h3> <p> 2009/03/24　ああああああああ<br> 2009/03/23　あああああああああ<br> ああ<br> </p> CSSは h3.st{color:#727171;background-color:#ffffff;font-size:95%;text-align:center;margin:0px 25px;padding:3px 0px;border-bottom:#87ccd4 1px dotted} p{text-align:left;margin:0px;padding:3px 32px;line-height:200%;font-size:90%;} です。 CSS内で、CLASS要素を指定した他のpタグにfloatを指定しましたが、それが影響しているかと思って消してみても変わりません。 どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSのmarginとpadding

    テーブルの指定で以下のように指定しています。 この場合、 1.760pxのテーブルで右1pxの線をしていますが、この場合、中に入れる画像（その他のピクセルサイズ指定）は759pxまでにしなければいけませんか？ 2.marginでなく、paddiingで指定した場合も教えてください。 table.top { border-style : solid ; 　　border-width : 0 1px 0 0; 　　border-color : #333333; 　　margin-top: 5px; 　　margin-right: auto; 　　margin-left: auto; 　　margin-bottom: 0; 　　width: 760px; }

    • ベストアンサー
    • HTML
  • p要素を入れたボックスの高さ。

    div要素に下のCSSを適用して、そのなかに<p>で囲ったテキストを入れています。 padding: 0 25px; background: transparent url(../image/web/bm_narrow.gif) repeat-y; p要素には、デフォルトで上下にマージンがついていると思うのですが ボックスの高さがp要素のマージン部分を反映せず、背景画像が p要素のマージン部分には表示されないという状況です。 ボックス部分のpaddingをpadding: 1px 25px;とすると きちんと表示されるようになったので、ほぼ解決しているのですが このような現象は正常なのか、バグなのか、知りたいです。よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSについて

    下記ののCSSでmainContentの780px を250pxと530pxに分割する方法を教えてください。 DW CS3を使用しています。 よろしくお願いいたします。 <style type="text/css"> <!-- body { background: #666666; margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */ padding: 0; text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */ color: ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .oneColFixCtrHdr #container { width: 780px; /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */ background: #000000; margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */ border: 0px solid #000000; text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */ } .oneColFixCtrHdr #header { padding: 0 0px 0 0px; /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */ background-color: 000000; } .oneColFixCtrHdr #header h1 { margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */ padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */ } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0 0px; background-color: #444444; } .oneColFixCtrHdr #footer p { margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */ padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */ } --> </style>

  • CSS

    boxのサイズを文字に合わせたいです。 .box1 { /* Box */ padding: 0.5em 1em; margin: 2em 0; font-weight: ; border: solid 1px #fff; text-align: center; } .box1 p { margin: 0; padding: 0; color: white; }

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する