新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

内包されたDIVにmarginを設定すると親要素にも同じマージンが設定されることがある【CSS】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

これはわからんわ。

生徒さんの一人が陥った罠。
先生も知りませんでしたごめんなさい。

□ 【CSS Tips】ネストされたボックス要素のmargin-topのブラウザ毎の解釈の違い-Margin Collapsing – Awaresoft

空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる。

スポンサーリンク
 

具体的に説明していこうと思います。
まずは、以下のソースを御覧ください。

□ HTML

<div id=”wrapper”>
  <div id=”header”> ヘッダー  </div>
  <div id=”content”> コンテンツ  </div>
  <div id=”footer”> フッター  </div>
</div>

□ CSS

#wrapper {
width: 500px;
margin: auto;
background-color: #CCC;
}
#header {
height: 100px;
background-color: #FCF;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}

□ プレビュー
margin-topの謎(初期値)

ここで、CSSを以下のように書き足してみます。(書き足し部分は赤字)

#wrapper {
width: 500px;
margin: auto;
background-color: #CCC;
}
#header {
height: 100px;
background-color: #FCF;
margin-top: 50px;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}

さて、これがどんなふうに表示されるかご想像ください。
2択です。

□ プレビュー1
margin-topの謎(予想)

□ プレビュー2
margin-topの謎(実際)

おそらく多くの人はプレビュー1が正解だと思うと思います。
margin-topの設定を入れているのがheaderですからね。
ただ、これの正解はプレビュー2になります。

理由は前述のブログ引用の通り空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになるという「仕様」だから。

では、プレビュー1のように表示させるにはどうしたらいいか。
賢明な方はheaderにmargin-topでなく、wrapperにpadding-topの設定をすればいいと気付きます。
ただ、ここはあえて現状のCSS及びHTMLに何か書き加えることでなんとかやっていこうと思います。

1. HTML上のwrapperに何か書き込む。

□ ソース

<div id=”wrapper”>ラッパー
  <div id=”header”> ヘッダー  </div>
  <div id=”content”> コンテンツ  </div>
  <div id=”footer”> フッター  </div>
</div>

□ プレビュー
margin-topの謎(修正1)

2. CSSでwrapperにboaderの設定をする。

□ ソース

#wrapper {
width: 500px;
margin: auto;
background-color: #CCC;
border: 1px solid #999;
}
#header {
height: 100px;
background-color: #FCF;
margin-top: 50px;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}

□ プレビュー
margin-topの謎(修正2)

CSSでwrapperにpaddingの設定をする。

□ ソース

#wrapper {
width: 500px;
margin: auto;
background-color: #CCC;
padding: 1px;
}
#header {
height: 100px;
background-color: #FCF;
margin-top: 50px;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}

□ プレビュー 
margin-topの謎(修正3)

と、どれも見た目がちょっとだけ変わっちゃうんですよね。
HTMLで完全な空白ブランクを入れちゃうというのもありますがいまいちだし。。

だもんで、最初に思いついたようにwrapperにpadding-topを設定するのがやっぱり一番でしょう。

□ ソース

#wrapper {
width: 500px;
margin: auto;
background-color: #CCC;
padding-top: 50px;
}
#header {
height: 100px;
background-color: #FCF;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}

□ プレビュー 
margin-topの謎(予想)

CSSもまだまだ奥が深い。
これで、CSS3が使われ始めたら、またいろいろと覚えなければならないことが出てくるんでしょうねぇ。 

 - デザイン, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
「iPhone」片手で拡大縮小する方法

1年以上前の記事です。内容が古い可能性があります。もう、今年はiPhone(アイ …

no image
正月早々

1年以上前の記事です。内容が古い可能性があります。自宅兼会社で使っているノートパ …

Flashの上にHTMLオブジェクトを配置する方法

1年以上前の記事です。内容が古い可能性があります。デザイナーからちょっとした注文 …

やっぱりフォローしないと外される。「つぶくま」は100%リフォローします【ツイッター】

1年以上前の記事です。内容が古い可能性があります。熊谷市のツイッターポータルサイ …

no image
画像共有サイト(写真共有サイト・フォトシェアリング)ってたくさんあるんだね

1年以上前の記事です。内容が古い可能性があります。前記事からの流れで画像共有サイ …

雇用契約書(労働条件通知書)は日付のちゃんと入っているものを用意してもらおう

このところ、不幸自慢となってしまっている当ブログですが、これを最後に方向転換して …

ネットで印刷、印刷通販の「グラフィック」を使ってみた【納品編】

1年以上前の記事です。内容が古い可能性があります。発注、入稿と進んできたグラフィ …

Adsense広告配信を完全に止められてしまいました。再申請は慎重に

1年以上前の記事です。内容が古い可能性があります。数週間前よりアボセンスを喰らっ …

熊谷駅、上尾駅等から池袋駅、新宿駅、渋谷駅までの定期券で途中下車できる駅を増やす方法

1年以上前の記事です。内容が古い可能性があります。これ、知っておくと途中下車でき …

Yahoo!ブログで表組みを書く方法 【wiki文法】

1年以上前の記事です。内容が古い可能性があります。生徒さんからの要望でYahoo …

血液型オヤジ