고정 헤더가 콘텐츠를 아래로 밀어내는 이유는 무엇이며 어떻게 해결할 수 있습니까?

고정 헤더가 콘텐츠를 밀어내림

헤더에 페이지 제목과 탐색바 제목을 넣었는데 설정하자마자 위치:고정; 상단의 마진이 증가했습니다. Codepen 링크는 다음과 같습니다.

마진 축소 문제가 발생했습니다. 헤더를 고정한 후 이를 흐름에서 제거하면 양식이 첫 번째 유입 요소가 되므로 상단 여백이 본문의 상단 여백과 축소됩니다¹. 이는 본문의 상단 여백이 크고 상단 값을 설정하지 않았으므로 고정 요소가 본체를 고려하여 배치된다는 의미입니다².

이를 방지하려면 간단히 필요합니다. 여백 축소를 비활성화하거나(다른 문제를 피하기 위해 권장함) 최상위 값을 설정하여 요소를 원하는 위치로 이동합니다.

body {
 padding-top:1px; /*disable margin-collpasing*/
}

#header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
    top:0px; /*Add a top value to place it*/
}

¹ [본문에 여백이 설정되어 있지 않아 여백이 나타나지 않습니다. 요소와 본문 사이의 공간입니다. ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [자세히 알아보기 이것은 이것에서 작동합니다 기사.](https://css-tricks.com/couple-margin-collapsing-gotchas/)

위 내용은 고정 헤더가 콘텐츠를 아래로 밀어내는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!