- ベストアンサー
divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
結論から言えば、原因はそれぞれの仕様による表示の違いです。 こういう風にHTMLを記述した場合、divでmarginを0に指定しても、 pタグがあるからIEでは空白が0でも非IEでは１行分ほどの空白ができてしまいます。 <div> <p>＊＊＊</p> </div>
その他の回答 (1)
- DM9
- ベストアンサー率37% (43/115)
ザーとしか見てないんでアレなんですが、pタグ使ってますよね? pタグとかhタグはなにも指定しないと勝手に上下に余白を持つのですね。そのせいでは？すっきり統一したい場合が多いと思うんで、そういうときには、 p{ margin:0px; } を入れたらいいと思います。
お礼
ご回答ありがとうございます！ p{ margin:0; } を設定したところ、最上部の余白などがすっきり詰まってくれました！わかりやすくするためと思ってpタグを足していたのが裏目に出ていたとはお恥ずかしいです・・・ しかし、最下部の余白は依然残ったままです。こちらはどうすれば消えるのでしょうか・・？
補足
申し訳ありません、自分で<div id="all"></div>部分に下部パディングを設定していました・・・ 変な質問をしてしまい、申し訳ありませんでした！
お礼
どうもありがとうございます！pタグを使ったことによる改行を、むしろ正しく表示していたのがFirefoxやOperaで、IEの方が間違った表示をしている、ということなのでしょうね。 ページ最下部も完全に余白をなくしたいのですが、これはpタグにmargin:0を設定しても変わりませんでした。こちらはどのような理由があるのでしょう、、、
補足
申し訳ありません、自分で<div id="all"></div>部分に下部パディングを設定していました・・・ しっかり直りました！どうもありがとうございました！