>웹 프론트엔드 >CSS 튜토리얼 >HTML/CSS에서 기본 본문 여백과 추가 공간을 제거하는 방법은 무엇입니까?

HTML/CSS에서 기본 본문 여백과 추가 공간을 제거하는 방법은 무엇입니까?

DDD
DDD원래의
2024-12-25 20:58:10348검색

How to Eliminate Default Body Margins and Extra Space in HTML/CSS?

본문 주변의 여백 공간이나 기본 CSS 스타일 제거

요소 주변에 원치 않는 추가 공간이 있으면 실망스러울 수 있습니다. 이 문제는 의 고유한 여백 속성으로 인해 발생합니다. 요소.

CSS의 기본 본문 여백

기본적으로 HTML 요소의 여백은 8px이므로 페이지 콘텐츠 주변에 공간이 생깁니다. 이 문제를 해결하려면 CSS를 사용하여 이러한 여백을 명시적으로 제거하는 것이 중요합니다.

body {
    margin: 0;   /* Eliminate body margins */
}

전역 CSS 재설정

또는 더 포괄적인 솔루션은 전역 CSS를 사용하는 것입니다. 다시 놓기. 이 기술은 모든 기본 브라우저 스타일을 재설정하여 페이지 디자인의 일관되고 예측 가능한 시작점을 보장합니다.

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

덜 전역 솔루션

원하는 경우 다음을 선택할 수 있습니다. 다음 요소를 구체적으로 타겟팅하여 덜 글로벌한 접근 방식:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

기타 CSS 재설정

다양한 CSS 재설정이 가능합니다. 포함:

  • http://meyerweb.com/eric/tools/css/reset/
  • https://github.com/necolas/normalize.css/
  • http://html5doctor.com/html-5-reset-stylesheet/

위 내용은 HTML/CSS에서 기본 본문 여백과 추가 공간을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.