헤더에 상단 여백을 추가하면 전체 헤더가 아래로 밀려나는 이유는 무엇입니까?

헤더 요소의 여백 상단 문제

헤더 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;
}

해결책 :

이 문제를 해결하려면 상위 항목에 Overflow:auto 속성을 추가하면 됩니다. div. 이렇게 하면 여백이 사용 가능한 공간을 넘어 확장될 때 상위 div가 스크롤되어 헤더 div가 아래로 이동하는 것을 방지합니다.

div#header {
  overflow: auto;
  ...
}

자세한 내용은 다음 링크를 참조하세요:

위 내용은 헤더에 상단 여백을 추가하면 전체 헤더가 아래로 밀려나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!