要素間、要素内に隙間が空く

質問

CSSを組んでいて、どうしても理由がわからない現象が２つあります。以下のソースは簡略化しています。

１．隣接する要素間に隙間があく
<header>
<div id="branding">...</div>
<nav id="access">...</div>
</header>
となっており、
div#branding,nav#access {margin:0;padding:0;}
を指定しているのに、両者に隙間があいてしまいます。（floatなども指定していません）

２．<div>内の要素の<table>の上部にだけ隙間があく
<aside id="sidebar">
<div id="calendar_wrap">
<table>...</table>
</div>
　：
</aside>
となっていて、
table { margin:0; padding:0; }
と指定しているのに、tableの上部にだけ隙間があいてしまいます。他にtableに関してスタイルを指定している箇所はありません。

インスペクタで見ても、謎の空白があるだけです。positionは全てstaticで、明示的に位置を指定するようなこともしていません。その他の部分は同じように指定しているのに、これら２つだけが意図しないように表示されてしまいます。

一般論として、どのような場合にこのようが現象が起こりうるのでしょうか。

回答No.2

ORUKA1951

＞html,body,div,span,applet,・・・【中略】・・・video {padding:0;border:0;margin:0;}
＞と最初にリセットされてあり（ここまで書く必要があるのか？と疑問に思っていますが）

　まったくですね。結局また書き足さなければならない。

　基本的にはfirebugで分かるとは思うのですが・・・・。それぞれのブロックの内部にあるすべての要素のmarginを調べてみる。

　それ以外の原因としては改行コードやタブなど・・その前後を選択して[選択部分のソース]で確認する。

　私はスタイルシートはすべて自分で書いています。それでも不都合があればHTMLのテンプレート自体書き直す。最終的にはそれが一番早かったりして・・