왜 `body { margin: 0; }` 내 로고의 상단 여백을 제거하시겠습니까?

CSS에서 여백 제거 문제 해결

웹 개발에서 여백 문제가 발생하는 경우 초보 프로그래머는 다음 CSS 규칙이 적절한지 궁금해할 수 있습니다.

body {
  margin: 0;
}

문제 선언문

위 코드를 적용하여 브라우저 상단과 "로고" 텍스트 사이의 공백을 제거하는 것은 실패했습니다. jsbin에서 다음 코드를 참조할 수 있습니다.

  <style>
    body {
      margin: 0;
    }
  </style>



  <div class="logo">
    <h1 id="Logo">Logo</h1>
  </div>

답변

제공된 CSS 규칙은 본문의 여백을 제거하기 위한 것이지만, 그렇지 않을 수도 있습니다. 이 시나리오에서는 이상적인 솔루션입니다. 다음과 같이 전역 재설정을 사용하면

* {
  margin: 0;
  padding: 0;
}

의도하지 않은 결과가 발생할 수 있습니다. 이 특별한 경우에는 "로고" 헤드라인의 여백이 상위 요소에 패딩이 없기 때문에 상위 요소 밖으로 돌출됩니다.

보다 타겟이 분명한 접근 방식이 권장됩니다.

.logo {
  padding: 10px;
  margin: 0;
}

부모의 패딩은 "로고" 여백이 부모 내에 유지되도록 보장합니다. 모든 여백과 안쪽 여백을 제거하면 예상치 못한 결과가 발생할 수 있으므로 전체 재설정에 의지하는 것보다 특정 요소에 집중하는 것이 좋습니다.

위 내용은 왜 `body { margin: 0; }` 내 로고의 상단 여백을 제거하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!