내부 요소의 상단 여백이 상위 div를 대체하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

래퍼 Div 배치에 영향을 미치는 여백 상단

헤더 구분과 같이 페이지에 처음 표시되는 요소에 상단 여백을 적용하는 경우 , 실수로 전체 분할을 대체할 수 있습니다. 이는 브라우저의 기본 계단식 동작의 결과입니다.

이 문제를 극복하려면 상위 부분에 다음 CSS 규칙을 구현하는 것이 해결책입니다.

overflow: auto;

이 규칙을 지정하면 상위 부문은 내부 요소의 상단 여백을 수용하도록 높이를 조정하여 부문이 아래로 밀리는 것을 방지합니다.

업데이트된 코드는 다음과 같습니다. 이 솔루션을 통합한 스니펫:

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

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

이 기술을 구현하면 h1 요소에 적용된 상단 여백이 더 이상 헤더 구분 위치에 영향을 미치지 않습니다.

위 내용은 내부 요소의 상단 여백이 상위 div를 대체하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!