Question

当给出一个上边距时，div“welove”也会推动它被包裹下来的div。我不希望这种情况发生。谁能告诉我我做错了什么？该网站在此处显示：http://littleboxcreative.com

- HTML -

<!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=utf-8" />
<title>Little Box Creative</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />




<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>


</head>




<body>

<div id="wrapper">

<div id="header">

    <div id="logo">
    </div>
    <div id="tagline">

        <div class="tagline1">
        </div>
    <div id="headline">
    </div>
        <div class="tagline2">
        </div>





    </div>









</div>



<div id="body">
        <div id="services">

        </div>
        <hr />
        <div id="portfolio">

        </div>
    <div id="innerbody">
        <div id="welove">

        </div>
    </div>
</div>
</div>
</body>
</html>

- CSS -

body {
    background-color: #0E121B;
    color: #ffffff;
}

#wrapper {
    width:960px;
    height: 100%;
    margin:0 auto;
}

#header {
    width: 960px;
    height: 500px;
    margin: 0 auto;
}

#logo {
    width: 470px;
    height:400px;
    background-color: #ffffff;
    float: left;
    margin: 30px 5px 0 0;
}

#tagline {
    width: 470px;
    height: 400px;
    float: left;
    margin: 30px 0 0 0;

}

.tagline1 {
    width: 379px;
    height: 102px;
    background-image: url('http://littleboxcreative.com/img/tagline1.png');
    margin: 0 auto;
}

#headline {
    border-top: 1px solid #080b10;
    border-bottom: 1px solid #252e44;
    height: 1px;
    width: 370px;
    margin: 40px 0 0 50px;
}

.tagline2 {
    width: 407px;
    height:96px;
    background-image: url('http://littleboxcreative.com/img/tagline2.png');
    margin: 50px 0 0 36px;
}

#services {
    width:960px;
    height: 500px;
    background-image: url('http://littleboxcreative.com/img/niceback.jpg');
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: -5px -5px 15px #000;
    -webkit-box-shadow: -5px -5px 15px #000;
    box-shadow: -5px -5px 15px #000;

}

#portfolio {
    width: 960px;
    height: 500px;
    background-image: url('http://littleboxcreative.com/img/paperback.png');
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: -5px -5px 15px #000;
    -webkit-box-shadow: -5px -5px 15px #000;
    box-shadow: -5px -5px 15px #000;


}

#innerbody {
    width: 960px;
    min-height:500px;
    height: 100%;
    background-image: url('http://littleboxcreative.com/img/backpattern.gif');
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -moz-box-shadow: -5px -5px 15px #000;
    -webkit-box-shadow: -5px -5px 15px #000;
    box-shadow: -5px -5px 15px #000;

}

#welove {
    width: 900px;
    height: 200px;
    margin: 45px 0 0 30px;
    background-color: #000000;
    opacity: 0.6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

}

Answer 1

我建议为容器div设置padding-top：

#innerbody {
    padding-top: 45px;
}

溢出：隐藏可能会给未来的设计选择带来问题。

Answer 2

将overflow: hidden;添加到#inner的css中。此外，我建议不要将标签留空，用空格替换空格，因为在某些浏览器中，空格可能会错误地呈现，因为其中带有HTML注释的空白标记不会添加意外的空格。

例如<div id="logo"></div>

而不是<div id="logo"> </div>

Answer 3

我不知道为什么会这样，但由于某种原因，你会得到一个'向上继承'，其中内部标签的边距应用于out div。我经常遇到p或h1标签，导致其容器div的填充/边距问题。尝试添加一些测试文本，看看这是否是这种情况;另外，尝试在容器div上使用填充而不是/除了包含div上的magin。

Answer 4

尝试将position: absolute;添加到#innerbody div。

保证金问题

4 个答案: