HTML 및 CSS에서 헤더 위의 예기치 않은 여백을 제거하는 방법은 무엇입니까?

헤더 주변의 불필요한 여백 제거

헤더 위의 불필요한 공간을 최소화하기 위해 HTML 및 CSS 스니펫이 도입되었습니다. :

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}

<header>
  <h1>OQ Online Judge</h1>
  <form action="<?php echo base_url(); ?> /index.php/base/si" method="post">
    <label for="email1">E-mail : </label>
    <input type="text" name="email">

여백을 설정했음에도 불구하고 <본문> 및 <헤더> 요소를 0으로 설정해도 0이 아닌 여백이 계속 나타납니다. 이 불가사의한 공간은 여백 축소로 인해 발생합니다.

여백 축소 이해

마진 축소는 인접 여백이 있는 특정 요소가 단일 여백으로 축소될 때 발생합니다. 이는 블록 수준 컨테이너 내의 요소에서 일반적으로 관찰됩니다. 이 경우 및 <헤더> 요소는 둘 다 블록 수준 요소입니다.

해결책: 특정 헤더 요소에 여백 적용

원치 않는 여백을 제거하려면 특정 헤더 요소에 여백 0을 적용하세요. 문제를 일으키는 헤더 요소입니다. 이 경우에는

h1 {
    margin-top: 0;
}

요소를 0으로 설정하면 여백 축소가 깨지고 헤더 위의 불필요한 공간이 제거됩니다.

위 내용은 HTML 및 CSS에서 헤더 위의 예기치 않은 여백을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!