ここから本文です

marginが、ふたつ前のボックスに適用されます。

ele********さん

2013/8/1919:57:04

marginが、ふたつ前のボックスに適用されます。

<section id="aaa">
<div id="bbb">
<h3>○○○○○○○○○○○○○</h3>
<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろわをん</p>
</div>
</section>


添付図を見てください。
背景が紫の要素がh3、黄色の要素がdiv、緑色の要素がsectionです。

この状態で、h3要素に margin: 20px 5px 0 5px1 ;
と指定すると、なぜか、h3の上にすきまはあかず、section#aaaの上に隙間が開きます。
左右5pxのmarginはきちんと効いています。

どのような原因が想定されるでしょうか?

確認したブラウザは、IE10、GoogleChrome、Firefoxです。
html5とCSS3で書いています。

Firefoxの開発者向けツールで確認すると、該当するh3にはきちんとmargin-topに20pxが指定されています。
ですので、どこかでそれを打ち消していると言うことはないと思います。


※作成途中ですのでベンダープレフィックスはまだ考慮しておりません。
後ほど追加します。

よろしくお願い致します。


--------もう少し詳しいソースです--------
CSS:
section#aaa{
margin:0;
background:green;
}

section#aaa div{
width:500px;
margin:0;
border-radius:10px;
background:yellow;
}

section#aaa h3{
display:block;
text-align:center;
background:#65a;
margin:20px 5px 0px 5px;
font-family:"MS 明朝";
text-shadow:1px 1px 3px #000;

}




html:
<section id="aaa">
<div id="bbb">
<h3>○○○○○○○○○○○○○○○</h3>
<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろわをん</p>
</div>
</section>

h3&amp;gt,section&amp;gt,p&amp;gt,bbb&amp;quot,aaa&amp;quot,heiltoreason,overflow

閲覧数:
179
回答数:
2
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

k_r********さん

2013/8/1920:36:21

いわゆる、margin の相殺 というものです。

margin の相殺 が起こるのは 2パターンあります。
[1] 上下の相殺
[2] 入れ子の相殺

今回は、[2] のパターンです。

詳しくは、下のサイトを参考にしてください。
http://kojika17.com/2012/08/margin-of-css.html(ページ中ほど)

margin の相殺は、一見バグのような挙動を示したりするので、たまに厄介です…。
今回の場合は、margin が 2つ前のボックスに適用されるように見えてしまったのです。


解決方法は、heiltoreasonさんの仰るとおり、
親の要素に、overflow: hidden; を指定したり、border や padding を指定することです。

質問した人からのコメント

2013/8/19 23:24:49

感謝 回答ありがとうございました。
marginの相殺に上下があるのは知っていましたが、まさか入れ子にもあるとは思いませんでした。
そういえば今まで自分が作ったサイトはみんなボーダーを使っていたので気が付かなかったんですね。
無事解決しました。ありがとうございます。

ベストアンサー以外の回答

1〜1件/1件中

hei********さん

2013/8/1920:23:52

よくあるパターンですね、原因は知りませんけど、overflow や border で対処できます。

例:
section#aaa div{
overflow: hidden; /* 追加 */
}

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる