こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssのmarginについて教えてください

cssのmarginについて教えてください

cssを使い、一般的な1カラムのサイトを制作しています。
外枠を組む所までは上手く行ったのですが
中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。
IE7では問題なく表示されます。
色々と試した結果、中の要素のmargin(下記におけるdiv#header pの部分)が
外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。
(この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。)

marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。
試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、
<div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。


それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか?
div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。
独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが
詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。


----------------------------------------------------------------------

div#box {background-color: #ffffff ;
width : 850px ;
margin : 0 auto ;
min-height: 100% ;
position:relative ;}

div#header {background-image: url(image/back-header.gif) ;
width : 850px ;
height : 90px ;}

div#menu {background-image: url(image/back-menu.gif) ;
width : 850px ;
height : 45px ;}

div#main {background-image: url(image/back-main.gif) ;
background-repeat: no-repeat ;
background-position: top ;
width : 850px ;
padding-bottom: 25px ;}

div#footer {background-image: url(image/back-footer.gif) ;
width : 850px ;
height : 25px ;
position: absolute ;
bottom: 0px ; }

---------------------------------------------

div#header p {font-size : 0.9em ;
margin: 30px ;}

----------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<body>
<div id="box">
<div id="header"><p>あいうえお</p></div>
<div id="menu">省略</div>
<div id="main">省略</div>
<div id="footer">省略</div>
</div>

投稿日時 - 2010-10-31 00:07:59

QNo.6286483

困ってます

質問者が選んだベストアンサー

検証はしませんが、
まずは、bodyにデフォルトスペースがあるから解除かな。
次に、P のマージンもデフォルトで上下に影響するから、
マージン 0 で、パディングで微調整かな。


body{ margin:0; padding:0;}
div#header p{ margin:0; padding:0;}

P の横も考慮するのなら、
div#header p{ margin: 0 0 0 20px; padding: 0 0 0 0;}
こんな風に上右下左の数値を1個ずつ微調整して確認すると理解出来ると思う・・・

注意: div#headerの高さも変化するからその都度微調整を

投稿日時 - 2010-10-31 01:28:49

お礼

書いて頂いたことを参考に調べた結果、
marginの相殺を理解できていなかったのだと解りました。

回答ありがとうございました!

投稿日時 - 2010-11-01 05:31:41

ANo.1

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問