> 웹 프론트엔드 > CSS 튜토리얼 > 여백과 안쪽 여백을 확인했는데도 웹 페이지 상단에 공백이 있는 이유는 무엇입니까?

여백과 안쪽 여백을 확인했는데도 웹 페이지 상단에 공백이 있는 이유는 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-11 19:46:03
원래의
276명이 탐색했습니다.

Why is There White Space at the Top of My Web Page, Even Though I've Checked for Margins and Padding?

페이지 상단의 공백: 미스터리 풀기

웹 페이지 상단에서 예상치 못한 공백을 발견했습니다. 모든 요소를 ​​검사하고 눈에 띄는 여백이나 패딩이 없음에도 불구하고. HTML 요소를 검사할 때 공백이 있는 것을 발견했지만 body 요소에는 공백이 포함되어 있지 않습니다. DOCTYPE 선언을 삭제하면 문제가 해결되었습니다.

이 문제를 해결하려면 웹사이트 스타일 시트 내에서 CSS 재설정을 구현하는 것을 고려해 보세요. 다양한 브라우저에서는 사용자가 인식하지 못하는 기본 여백과 패딩을 렌더링할 수 있습니다. CSS 재설정은 모든 브라우저에서 요소 스타일을 표준화하여 깨끗한 상태로 초기화합니다.

CSS 재설정 코드:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
로그인 후 복사
로그인 후 복사

이 포괄적인 재설정은 브라우저에서 바람직하지 않은 공백을 제거합니다. 페이지 상단이나 다른 곳에서. 이 재설정 코드를 스타일 시트 시작 부분에 배치하는 것을 잊지 마세요.

업데이트: 브라우저 간 호환성을 위한 범용 선택기:

Frank의 범용 선택기 사용 제안( *) 명시적으로 모든 요소를 ​​나열하는 대신에 주목할 만합니다. 이 선택기는 모든 주요 브라우저에서 브라우저 간 호환이 입증되었습니다.

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
로그인 후 복사
로그인 후 복사

공백 문제를 효과적으로 해결하고 다양한 브라우저에서 일관된 레이아웃을 보장하려면 두 가지 방법 중 하나를 구현하세요.

위 내용은 여백과 안쪽 여백을 확인했는데도 웹 페이지 상단에 공백이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿