<p>タグのマージン

こんにちは、坂井です。

あるページを作っていて問題が起きました。
問題のページをFirefoxで見ると（Google Chrome、IE8でも大体同じ）
　

IE6で見ると　（IE7でも大体同じ）



困りました。見出しと本文との間が異なっています。
こういう時はFirebugを見ると良いと先輩に教わりました。
要素を調査してみると・・・

Firefoxの本文の始まりで、1行程度の空きがあるようです。
この辺りのコードはこのようになっています。


<p>sweets factoryのサイトへようこそ。<br/>
text sample text sample text sample text sample<br>
text sample text sample text sample text sample<br>
text sample text sample text sample text sample<br>
text sample text sample text sample text sample<br>
text sample text sample text sample text sample<br>
text sample text sample text sample text sample</p>

どうやら<p>タグが怪しいです。
デフォルトのmarginかpaddingがIE6と違う感じがします。
そこでスタイルシートで<p>タグのマージンを0にするように指定。
p {
margin:0px 0px 0px 0px;
}

スタイルシートを直した後、Firefoxで見てみると・・・


マージンが無くなって、IE6とほぼ同じ見た目になりました。
今回は勘が一発で当たって運が良いです！
ここでは、こういった周回遅れの話題でもバンバン書いていきます。