スタイルシートでデザインを作り込んでいく時、思った通りに margin が効いてくれない事があります。 marginは 0px なはずなのに・・・ 以下の例を見てください。 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <style type='text/css'><!-- body{ background-color:#ffffff; margin: 0; } .div1{ background-color:#ffff00; margin: 0px; } --></style> </head> <body> <div class='div1'> <h1>タイトル</h1> <p>テスト</p> </div> </body> </html> <div>要素は背景色を黄色にしています。 <body>要素も<div>要素も margin は 0px に設定しているので、余白なく黄色い四角が表示されるように思いますが実際は隙間が空いてしまいます。 隙間の正体 この隙間は <h1>要素 の margin です。 <h1>要素の margin が親要素である <div>要素を超えて適用されています。 このような現象は <div>要素の padding と border が共に 0px の場合に起こります。 margin には接する要素の margin を相殺するという仕様があります。 相殺されるケースは以下のような場合です。 親要素の margin-top と先頭の子要素の margin-top 親要素の margin-bottom と 最後の子要素の margin-bottom 同階層の最初の要素の margin-bottom と 次の要素の margin-top