Question

请参阅此代码

    <!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添加了30px的上边距。为什么我可以将div放在另一个有一些上边距的内部，由于这个边距，当你在浏览器中看到它时，整个页脚div增加30 px的边距，我可以通过添加填充而不是边距来解决这个问题，但我想知道如果我想将一个700px宽的div水平居中放在整页100％宽的div中，并且我想在内部div中添加一些余量。

Answer 1

将“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/

希望这有帮助。

鲍勃

将400px宽的div水平对中放置在带有上边距的全宽div内

1 个答案: