Question

基本上我有一个容器div和一个口号div。当我在口号div中应用保证金时，它也将它应用于容器div，我不知道为什么。任何人都会向我推进正确的方向，为什么它会移动父div？

HTML：

<div id="container">
<ul>
<a href=""><li>Home</li></a>
<a href=""><li>About</li></a>
<a href=""><li>School Sessions</li></a>
<a href=""><li>Summer</li></a>
<a href=""><li>Online Classes</li></a>
<a href=""><li>Register</li></a>
<a href=""><li>Contact</li></a>
</ul>
<div id="slogan">

</div>
</div>

CSS：

*{
    margin:0;
    padding:0;  
}
body{
    background: #7559a6;
    font-family: 'Open Sans', sans-serif;   
}
#container{
    position:relative;
    width:1000px;
    height:500px;
    margin:auto;
    background:white;
}
ul{
    position:absolute;
    right:0px;
    background:rgba(77, 77, 77, 0.75);  
    border-radius:12px;
    margin:25px 0px;
    padding:5px;
}
ul li{
    display:inline-block;   
    list-style:none;
    color:white;
    padding:5px 10px;
}
ul li a{
    text-decoration:none;   
    color:inherit;
}
#slogan{
    width:1000px;
    height:300px;
    background:blue;
    margin-top:50px;
}

Answer 1

在这种情况下最简单的方法是将overflow: auto放入容器div中的oldschool方法。

Answer 2

使用div包装菜单并给它一个至少1px的最小高度，使其在文档流中占用一些空间，并且基本上使标语div清除到新行。口号div现在将从菜单div“推”下来。

Working Demo

<强> HTML：

<div id="container">
    <div id="menu">
        <ul>
            <a href=""><li>Home</li></a>
            <a href=""><li>About</li></a>
            <a href=""><li>School Sessions</li></a>
            <a href=""><li>Summer</li></a>
            <a href=""><li>Online Classes</li></a>
            <a href=""><li>Register</li></a>
            <a href=""><li>Contact</li></a>
        </ul>
    </div>
    <div id="slogan">
        text
    </div>
</div>

<强> CSS：

*{
    margin:0;
    padding:0;  
}
body{
    background: #7559a6;
    font-family: 'Open Sans', sans-serif;   
}
#container{
    position:relative;
    width:1000px;
    height:500px;
    margin:auto;
    background:white;
}
ul{
    position:absolute;
    right:0px;
    background:rgba(77, 77, 77, 0.75);  
    border-radius:12px;
    margin:25px 0px;
    padding:5px;
}
ul li{
    display:inline-block;   
    list-style:none;
    color:white;
    padding:5px 10px;
}
ul li a{
    text-decoration:none;   
    color:inherit;
}
#slogan{
    width:1000px;
    height:300px;
    background:blue;
    margin-top:50px;
}
#menu{
    min-height: 1px;
}

Answer 3

首先，令人震惊的是，你正在使用锚标签包装li。使用链接创建列表的语义方式是：

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

我认为代码中发生的事情是它以不同于通常预期的方式计算元素的边距。正如Passerby所建议的那样，寻找“利润率崩溃”。

我通常做的是漂浮它：

float: left;

所以只需修改你的代码（增加更多的余量）：

#slogan{
  width:1000px;
  height:300px;
  background:blue;
  margin-top:100px;
  float: left;  
}

Answer 4

这主要是因为保证金折叠的方式起作用。您可以在此处详细了解：http://reference.sitepoint.com/css/collapsingmargins

您看到的额外空间实际上是从您的口号中伸出的边缘。虽然保证金折叠对段落，列表项等非常有用，但这里并没有多大意义。

基本上，您要做的是在容器顶部添加1px填充。

padding-top: 1px

此外，您可以添加具有相同效果的1px border-top规则。

border-top: 1px solid white

祝你好运！

孩子div改变父母div保证金？

4 个答案: