내 div 요소에 추가 공백이 남는 이유는 무엇이며 기본 CSS 스타일과 여백을 제거하려면 어떻게 해야 합니까?

여백 및 기본 CSS 스타일 제거

초보자는 처음 프로그래밍을 배울 때 div 요소 주위에 공백이 추가되는 문제에 직면할 수 있습니다. 또한 테두리, 패딩 등과 같은 스타일 속성은 효과가 없으며 공백을 제거할 수 없습니다.

다음 코드를 고려하세요.

<div>
<p>스타일 시트는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false">#header_div  {
    background: #0A62AA;
    height: 64px;
    min-width: 500px;
} 
#vipcentral_logo { float:left;  margin: 0 0 0 0; }
#intel_logo      { float:right; margin: 0 0 0 0; }

그러나 렌더링에서는 브라우저 가장자리와 도구 모음에 파란색 영역이 표시됩니다. 사이에 추가 공간이 있습니다:

[사진에는 추가 공간이 표시됩니다.]

이 문제를 해결하는 열쇠는 다음과 같습니다.

기본 여백: body 요소에는 기본적으로 8px 여백이 있으므로 div 요소가 브라우저 가장자리에 닿는 것을 방지합니다.

해결책:

1. 클리어 바디 여백:

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

2. 전역 재설정 사용:

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

3. 제한된 재설정 범위:

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;
}

4. 기타 CSS 재설정:

meyerweb.com/eric/tools/css/reset/
github.com/necolas/normalize.css/
html5doctor.com/html- 5 -리셋 스타일시트/