하위 요소의 상단 여백이 상위 div를 아래로 밀어내는 이유는 무엇입니까?

Margin-Top이 상위 Div를 아래로 밀어냄: 문제 이해 및 해결

많은 개발자가 상단 여백을 적용할 때 특이한 문제에 직면합니다. 페이지에 표시되는 첫 번째 요소: 상위 div가 아래로 푸시됩니다. 이 동작의 원인을 조사하고 해결책을 제공하기 위해 제공된 코드 조각을 분석해 보겠습니다.

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
}

div#header h1 {
  text-align: center;
  width: 375px;
  height: 50px;
  margin: 50px auto;
  font-size: 220%;
  background: url('../../images/name_logo.png') no-repeat;
}

이 코드는 50px의 여백을 포함하는 중첩된 h1 요소가 있는 헤더 div를 정의합니다. 일반적으로 이 여백은 h1과 헤더 div의 위쪽 가장자리 사이의 공간을 늘릴 것으로 예상됩니다. 그러나 대신 전체 헤더 div가 50px 아래로 푸시됩니다.

이 происходит 이유를 이해하려면 "블록 형식 지정 컨텍스트"를 고려해야 합니다. 페이지의 첫 번째 표시 요소에 적용하면 상단 여백이 블록 서식 컨텍스트를 재설정하여 상위 div가 아래로 내려오게 됩니다.

이 문제에 대한 해결책은 상위 div에 Overflow:auto를 적용하는 것입니다. . 이렇게 하면 상위 div가 상단 여백이 있는 h1을 포함하여 하위 요소를 수용할 수 있도록 높이를 자동으로 조정할 수 있습니다.

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
  overflow: auto;
}

overflow: auto를 추가하면 헤더 div의 크기가 수직으로 조정되어 이를 방지할 수 있습니다. h1 요소에 상단 여백을 추가할 때 아래로 밀려나는 것을 방지합니다.

위 내용은 하위 요소의 상단 여백이 상위 div를 아래로 밀어내는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!