ボックスの概念の復習



私はよく、margin と padding がごっちゃになります。
ので、頭の中の整理の為に今日はボックスの概念の復習です。

図にしてみる


上から見るとこんな感じ。
背景色は背景画像の下に置いてあるので、背景画像が透過されている場合は透過部分に背景色が出る。

もう少しわかりやすくしてみる

  • 背景画像、背景色、ボーダーが指定されている時に、マージン指定した時、背景も本文も共に移動するのがmargin
  • 背景画像、背景色、ボーダーが指定されている時に、パディング指定した時、本文のみ移動するのがpadding
  • 背景画像、背景色、ボーダーが指定されていない時は、見た目上変わりはない

実践してみる

2つの違い、
こんな感じです。

HTML
<div class=”margin”>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文木文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文(margin50px)</div>

<div class=”padding”>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文木文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文(padding50px)</div>

CSS
.margin{
width:200px;
height:200px;
background-color:#F08080;
margin:50px 50px 50px 50px;}

.padding{
width:200px;
height:200px;
background-color:#F08080;
padding:50px 50px 50px 50px;}

表示結果

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文木文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文(margin50px)
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文木文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文(padding50px)

どちらのボックスも縦幅・横幅は200pxで指定しています。
が、
marginは背景色部分が200×200pxで背景色の外側が50px空きます。つまり、margin指定の場合200×200の見える領域と上下左右50px分の見えない領域でボックスが構成されます。
paddingも同じく背景色部分は200×200pxですが、そこからさらに外側に50pxの空白が出来ます。つまり300×300の見える領域になってます。
この事から言える事は、仮に背景色や画像が無かった場合には、本文自体は同じ表示結果になるので、レイアウトが崩れた際などにpadding指定だと混乱しやすいんです。(引き算をしなければならない…?)

ので、表示結果が同じ場合にはmarginで指定しておいた方がよさそうです^^

しかーし!
ひとつIntarnetExplorer6では、flortをかけるとmarginの距離が2倍になったりする現象が起こるようです。
以下は参考にさせていただいたリンクです。

IE6のレイアウト崩れ

IE6でfloatさせたボックスのmarginが倍くらいになる対処方法csslecture様
CSSレイアウト崩れの原因 -ブラウザによる「padding」の解釈の違いcssレイアウト実践講座様

IE6ユーザーってどれくらいいるの?

The Internet Explorer6 Countdown
2013年4月では6.3%でした(-人-)

企業サイト等はIE7〜が概ね標準としてしていい感じですかねえ。

ではでは☆

コメントを残す

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