정적 요소는 왜 움직입니까?

Question

정적 위치 요소가 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을받지 않는 경우 왜 상자 요소의 여백 - 맨 위 값을 변경할 때 상자가 컨테이너와 함께 이동합니까?

나는 나의 코드를 지켰다 : https://jsfiddle.net/b9rtwkq7/5/

HTML :

<div class="container"> 
    <div class="box"> 
    </div> 
</div> 

CSS : https://www.w3.org/TR/CSS2/box.html#collapsing-margins

추가 : 여백은 당신이 게시 jsfiddle 붕괴되어

.container 
{ 
    width:500px; 
    height: 500px; 
    background-color: grey; 
    margin-top: 00px; 
} 

.box 
{ 
    width:100px; 
    height: 100px; 
    background-color: orange; 
    margin-top: 100px; 

} 

Answer 1

오버플로 : 컨테이너에 자동/숨김 또는 다음과 같은 클래스에서 추가 한 CSS를 따르십시오.

.no-collapse:before { 
    content: ""; 
    display: table; 
}