floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて
現在HTMLとCSSを勉強している者です。
cssのmarginの挙動がいまいち理解できずに困っていたもので、
ご回答いただきたく質問させていただきました。
以下私が作ったサンプルHTMLとCSSです。
==========HTML==========
<div id="test01">
<p>Pタグで囲まれた文章です。</p>
</div>
<div id="test02">
<p>Pタグで囲まれた文章です。</p>
</div>
<div id="test03">
<p>Pタグで囲まれた文章です。</p>
</div>
<div id="clear">
<p>clear: bothです。</p>
</div>
（<body>前、</body>後省略）
==========CSS==========
html, body, div { margin: 0; padding: 0;}
p {margin: 10px; padding: 0;}
div#test01 {background-color:#EEE; width: 900px;}
div#test02 {background-color:#CCC; float: left; width: 650px;}
div#test03 {background-color:#AAA; float: left; width: 250px;}
div#clear {background-color:#888; clear:both; width: 900px;}
先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。
最後にclear:bothを行っております。
そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。
先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。
このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。
また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。
おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。
また私の記述方法に誤りがあればご指導いただけると助かります。
宜しくお願い申し上げます。
