子div更改父div边距？

Question

basically I have a container div and a slogan div. when i apply a margin to the slogan div it applies it to the container div as well and i do not know why.can anyone push me in the right direction as to why it is moving the parent 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中。

Answer 2

Wrap your menu with a div and give it a min-height of at least 1px, causing it to take some space back in the flow of the document and essentially cause the slogan div to clear onto a new line. The slogan div will now "push" down from the menu 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

First of all, it's alarming that you're wrapping the li with anchor tags. The semantic way of creating a list with links is this:

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

I think what happens in your code is it computes the margin of the elements in a different way than what is usually expected. As what Passerby suggests, search for "margin collapse".

What I usually do is to float it:

float: left;

So just modify your bit of code to this (added more margin):

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

Answer 4

The main reason for this is because of the way margin collapsing works. You can read more about that here: http://reference.sitepoint.com/css/collapsingmargins

The extra space your seeing is actually margin sticking out of your slogan. While margin collapsing is very useful for paragraphs, list-items, etc. it doesn't really make much sense here.

Basically, what you want to do is add either a 1px padding to the top of your container.

padding-top: 1px

Additionally, you can add a 1px border-top rule that will have the same effect.

border-top: 1px solid white

Good luck!