이 CSS margin-top 스타일이 작동하지 않는 이유는 무엇입니까?

Question

다른 div 내부의 div에 margin 값을 추가해 보았습니다. 무시되는 것처럼 보이는 가장 높은 값을 제외하고는 모든 것이 잘 작동합니다. 그런데 왜?

나의 기대:

내가 얻은 것:

코드:

#outer {
  너비: 500px;
  높이: 200px;
  배경: #FFCCCC;
  여백: 50px 자동 0 자동;
  디스플레이: 블록;
}

#내부 {
  배경: #FFCC33;
  여백: 50px 50px 50px 50px;
  패딩: 10px;
  디스플레이: 블록;
}

  

    안녕하세요!
  

Answer 1

실내에서 체험해 보세요div上使用display: inline-block;. 이렇게:

으아아아

Answer 2

실제로 보고 있는 것은 #inner 元素的上边距 折叠到#outer元素的上边缘，仅保留#outer여백이 손상되지 않았다는 것입니다(비록 이미지에는 표시되지 않음). 두 상자의 위쪽 가장자리는 여백이 동일하기 때문에 서로 같은 높이입니다.

W3C 사양의 관련 사항은 다음과 같습니다.

여백이 무너지는 것을 방지하려면 다음 중 하나를 수행할 수 있습니다.

위 옵션은 다음과 같은 이유로 여백이 축소되는 것을 방지합니다.

왼쪽 및 오른쪽 여백은 다음과 같은 이유로 예상대로 작동합니다.