は上マージン

との完全な幅のdivの内側に並ぶ400ピクセル幅のdivの水平方向の中心を入れて、私はフッタコンテンツのdivのために30px上の余白を入れているので、私はボディとフッタの間のギャップを参照してください。このコードは上マージン

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
    <!-- 
    .header { 
height: 200px; 
background-color: #CCCCCC; 
text-align: center; 
    } 
    .contents { 
background-color: #0099FF; 
text-align: center; 
height: 400px; 
    } 
    .footer { 
    background-color: #993300; 
height: 100px; 
    } 
    .footer .footer-contents { 
margin-top: 30px; 
margin-right: auto; 
margin-bottom: 30px; 
margin-left: auto; 
width: 700px; 
    } 
    --> 
    </style> 
    </head> 

    <body> 
    <div class="header">Header</div> 
    <div class="contents"> Body </div> 
    <div class="footer"> 
    <div class="footer-contents"> 
    Some contents goes here 
    </div> 
    </div> 


    </body> 
    </html>

を参照してください。なぜ、divをいくつかの上余白で囲むことができます。この余白のために、フッタdiv全体が30 pxの余白がブラウザに表示されたときに余白の代わりに余白を追加することで解決できますが、 700pxの幅のdivを100％の幅のdivに水平に配置したい場合はどうすればいいのでしょうか。内側のdivに余裕をもたせたいのですが。

出典

2011-07-17 Sohail

'footer-contents' div以外のコンテンツを 'footer' divに追加します。例：

<div class='footer'>&nbsp; 
    <div class='footer-contents'> 
     Some contents goes here 
    </div> 
</div>

この場合、内側のdivに正しくマージンが適用されます。

http://jsfiddle.net/Fq64H/1/

は、この情報がお役に立てば幸いです。

ボブ

出典

2011-07-17 19:34:16 rcravens

ありがとうございましたrcravens、は違いがありますか？これは唯一の方法なのですか？ – Sohail

は上マージン

答えて

関連する問題