border,margin,paddinの関係
説明を入力
Sample
(1)全て無指定
子要素
(2)親要素にborder指定
子要素
(3)親要素にpadding指定
子要素
(4)親要素にborderとpadding指定
子要素
(5)(4)に子要素のborderを追加
子要素
(6)(4)に子要素のborderとmarginを追加
子要素
IE8とFireFoxを見比べると、その違いに混乱する。例えばborderは、IEでは要素の内部に作られるのに対してFireFoxでは外部に作られる。
Sample Source......................................................................>>>
<style type="text/css">
.oya {width:80mm;height:20mm;background-color:#c0c0c0}
.ko {background-color:floralwhite}
</style>
<p">(1)全て無指定</p>
<div class="oya"><p class="ko">子要素</p></div>
<p>(2)親要素にborder指定</p>
<div class="oya" style="border:3mm solid navy"><p class="ko">子要素</p></div>
<p>(3)親要素にpadding指定</p>
<div class="oya" style="padding:3mm"><p class="ko">子要素</p></div>
<p>(4)親要素にborderとpadding指定</p>
<div class="oya" style="border:3mm solid navy;padding:3mm"><p class="ko">子要素</p></div>
<p>(5)(4)に子要素のborderを追加</p>
<div class="oya" style="border:3mm solid navy;padding:3mm">
<p class="ko" style="border:2mm solid green">子要素</p>
</div>
<p>(6)(4)に子要素のborderとmarginを追加</p>
<div class="oya" style="border:3mm solid navy;padding:3mm">
<p class="ko" style="border:2mm solid green;margin:5mm">子要素</p>
</div>