DIV Margin не работает согласно требованиям

Question

Я запутался в очень маленькой проблеме, и хотя я знаю, что я определенно делаю что-то неправильно. Я взял два div с разными CSS.

<div id="main"> 
    <div id="internal"> 
     hii 
    </div> 
</div> 

CSS из "основного" идентификатор

#main 
{ 
    height:80px; 
    background-color:black; 
    border:1px solid green; 
} 

и CSS "внутреннего" идентификатор

#internal 
{ 
    height:40px; 
    background-color:red; 
    margin-top:30px 
} 

Вот JSFiddle LINK

маржа-топ во внутренней DIV работает только в том случае, если в главном div есть свойство border. Если я удаляю границу из главного div, она работает по-другому. Я не понимаю, что здесь происходит. Может ли кто-нибудь ответить на мой вопрос?

Answer 1

Что вы видите, это случай margin collapse (в качестве альтернативы, читайте W3C specification для более подробного объяснения). Это происходит, когда:

1. Вертикальные поля примыкают (будь то братьев и сестер или родитель – ребенок)
2. пустой элемент блоки

Вы должны попытаться использовать отступы на #main вместо этого, то есть:

#main { 
    height:80px; 
    background-color:black; 
    border:1px solid green; 
    padding-top: 30px; 
}