Маржа div уважает его родителя

Question

Я смущен о полях. У меня есть логотип внутри содержимого div. Если я даю маржу на логотип div, это поле появляется между содержимым и страницей. Зачем?

Вот пример: http://jsfiddle.net/bCkpb/

CSS:

#content { 
    position:relative; 
    margin:0 auto; 
    width:300px; height:250px; 
    background-color:blue; 
} 

#logo { 
    margin:20px auto; /* Why this 20px appear between the page and the content? */ 
    width:120px; height:120px; 
    background:yellow; 
} 

HTML:

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

Answer 1

Это потому, что сверху край элемента уровня блока и верхнего края его первый дочерний уровень на уровне блока всегда будет collapse (если только никакая граница, прокладка, линейные боксы или зазор не разделяют их). Один из способов предотвратить это поведение - добавить значение overflow, отличное от видимого для div #content. Вы также можете изменить отображаемое значение #content на встроенный блок.

http://jsfiddle.net/bCkpb/3/