マージンについての覚書

<div id=”header”>
<div id=”header-inner”><h1>PHP practice</h1></div>
</div>

#header{width:100%; margin:0; padding:0; background:#E9E4BF;}
#header-inner{text-align:center; margin:0; padding:10px;}
h1{display: block; background:#ffffff;}

上記のような設定にすると、何故かヘッダーの背景色の上下が左右の幅より広く表示される。
何がいけないのかと色々ＣＳＳを書き換えたり、divの括り方がいけないのかと書き直したりして、漸く判明。

参考はこちらのサイトのマージンの相殺（collapsing margins） h1-h6要素
上下に自動的に一行分の余白が追加されるとの事。
CSSの記載を　h1{display: block; background:#ffffff; margin:0; padding:0;}　に変えたところ上下左右の幅は整った。