дочерний элемент div, изменяющий родительский поле div?

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

Оберните меню с DIV и дать ему мин-высоту, по меньшей мере 1px, заставляя его занять некоторое пространство обратно в поток документа и, по сути, вызывают деление лозунга на новую строку. Теперь лозунг 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 2

Самый простой способ в этом случае Oldschool способ положить overflow: auto в контейнер DIV.

Answer 3

Прежде всего, это тревожно, что вы обертываете li с помощью якорных тегов. Семантический способ создания списка со ссылками заключается в следующем:

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

Я думаю, что происходит в вашем коде она вычисляет запас элементов иначе, чем то, что обычно ожидается. Как предлагает Пассерби, найдите «крах краха».

То, что я обычно делаю, чтобы плавать его:

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: 1px solid white

Успехов!