Warum hinterlässt mein div-Element zusätzlichen Leerraum und wie kann ich Standard-CSS-Stile und -Ränder entfernen?

Eliminieren von Randraum und Standard-CSS-Stilen

Neulinge können beim ersten Erlernen des Programmierens auf das Problem von zusätzlichem Leerraum um div-Elemente stoßen. Darüber hinaus haben Stileigenschaften wie Rahmen, Abstand usw. keine Auswirkung und können Leerräume nicht beseitigen.

Bedenken Sie den folgenden Code:

<div>
<p>Das Stylesheet lautet wie folgt: </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; }

Das Rendering zeigt jedoch blaue Bereiche mit den Browserrändern und Symbolleisten Es gibt zusätzlichen Abstand zwischen:

[Bild zeigt zusätzlichen Abstand]

Der Schlüssel zur Lösung dieses Problems ist:

Standardrand: Das Body-Element hat standardmäßig 8-Pixel-Ränder, wodurch verhindert wird, dass das Div-Element die Ränder des Browsers überragt.

Lösung:

1. Klarer Körper Ränder:

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

2. Globales Zurücksetzen verwenden:

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

3. Begrenzter Reset-Bereich:

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. Andere CSS-Reset:

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