HTML 요소 주위의 불필요한 공백을 어떻게 제거합니까?

요소 주변 공백 제거: CSS 기본값 해결

웹 디자인에서는 0을 지정했음에도 불구하고 요소 주변에 과도한 공간이 발생하는 경우가 많습니다. 여백과 패딩. 이는 요소. 기본적으로 브라우저는 본문의 각 측면에 8px의 여백을 추가합니다.

해결책: 본문 사용자 정의

이 문제를 해결하려면 기본 본문 스타일을 재정의할 수 있습니다. CSS에서 여백을 0으로 설정하면 됩니다. 이렇게 하면 본체에 추가 공간이 추가되지 않습니다.

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

대안: 전역 재설정

보다 포괄적인 솔루션을 선호하는 경우 전역 재설정을 구현할 수 있습니다. 요소에 적용된 모든 기본 스타일을 제거하려면 재설정하세요. 이는 모든 요소에 대해 제로 마진과 패딩을 명시적으로 정의함으로써 달성됩니다.

*,
*::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 재설정 프레임워크를 활용할 수 있습니다.

• [Eric Meyer의 CSS 재설정](http://meyerweb.com/eric/tools /css/reset/)
• [니콜라스 갤러거의 Normalize.css](https://github.com/necolas/normalize.css/)
• [HTML5Doctor의 HTML5 재설정 스타일시트](http://html5doctor.com/html-5-reset-stylesheet/)

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