HTML 본문 요소 주위의 불필요한 공백을 어떻게 제거할 수 있습니까?

본문 요소 주위의 기본 공백 제거

HTML 및 CSS로 작업할 때 요소 주위에 원치 않는 공백이 발생할 수 있습니다. 이 공간은 요소.

기본 여백

기본적으로 요소의 모든 측면에 8px의 여백이 있습니다. 이 여백은 콘텐츠와 브라우저 창 가장자리 사이에 간격을 만듭니다. 이 여백을 제거하려면 CSS에 다음 스타일을 추가하세요.

body {
  margin: 0;
}

이렇게 하면 본문 여백이 0으로 재설정되어 추가 공간이 제거됩니다.

전역 CSS 재설정

또는 전역 CSS 재설정을 사용하여 모든 HTML 요소에서 모든 기본 스타일을 제거할 수 있습니다. 이는 웹사이트 스타일링을 위한 일관되고 예측 가능한 시작점을 설정하는 데 사용되는 일반적인 기술입니다.

인기 있는 글로벌 재설정 중 하나는 Nicolas Gallagher의 "Normalize" 스타일시트입니다.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

이 재설정은 를 포함한 모든 요소에서 여백과 패딩을 제거합니다. element.

선택적 재설정

특정 요소에 대한 스타일만 재설정해야 하는 경우 더 많은 대상 선택기를 사용할 수 있습니다. 예를 들어 다음 CSS는 에서 여백과 패딩을 제거합니다. 요소 및 모든 하위 요소:

body,
body > * {
  margin: 0;
  padding: 0;
}

결론

요소를 추가하거나 전역 CSS 재설정을 적용하면 불필요한 공백을 제거하고 브라우저 창 내에서 콘텐츠가 예상대로 정렬되도록 할 수 있습니다. 웹사이트의 기능이나 외관을 방해하지 않도록 변경 사항을 철저하게 테스트하는 것을 잊지 마세요.

위 내용은 HTML 본문 요소 주위의 불필요한 공백을 어떻게 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!