내 고정 헤더에 추가 상단 여백이 있는 것으로 나타나는 이유는 무엇입니까?

헤더를 고정으로 설정했는데 왜 아래로 이동하나요?

Codepen에서 헤더를 고정으로 설정했는데, 이는 헤더가 고정 상태로 유지된다는 의미입니다. 아래로 스크롤하는 동안에도 같은 위치입니다. 그런데 그렇게 하면 헤더 상단의 여백이 늘어나는 것 같았습니다. 이는 여백 축소로 인해 발생합니다.

여백 축소란 무엇인가요?

여백 축소는 다음과 같은 인접한 블록 수준 요소의 여백을 축소하는 CSS 동작입니다. 헤더와 그 아래의 양식. 헤더가 고정되면 문서의 흐름에서 제거되고 양식이 첫 번째 흐름 내 요소가 됩니다. 이로 인해 양식의 위쪽 여백이 본문의 위쪽 여백과 함께 축소되어 더 큰 여백이 표시됩니다.

수정 방법

이 문제를 처리하는 두 가지 일반적인 방법은 다음과 같습니다. 여백 축소를 비활성화하거나 필요한 요소에 상단 여백 값을 설정합니다.

여백 비활성화 축소

여백 축소를 비활성화하려면 body 요소에 padding-top: 1px CSS 규칙을 추가하세요. 이렇게 하면 브라우저가 본문의 상단 여백을 유지하게 됩니다.

body {
  padding-top: 1px; /* Disable margin-collapsing */
}

상단 여백 값 설정

또는 헤더에 상단 여백을 추가합니다. 이렇게 하면 헤더와 뷰포트 상단 사이의 거리가 설정됩니다.

#header {
  margin-top: 2rem;
}

위 내용은 내 고정 헤더에 추가 상단 여백이 있는 것으로 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!