So entfernen Sie den Randabstand um den Text herum oder löschen die Standard-CSS-Stile

Question 1

Ich bin zugegebenermaßen ein Anfänger, aber ich habe auch ziemlich viel gesucht, bevor ich dies gepostet habe. Es scheint zusätzlichen Platz um mein div-Element zu geben. Ich möchte auch darauf hinweisen, dass ich viele Kombinationen von Rahmen ausprobiert habe: 0, Polsterung: 0 usw. und nichts schien den Leerraum loszuwerden.

Hier ist der Code:

<html>
<head>
    <style type="text/css">
        #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; }
    </style>
</head>
<body>
    <div id="header_div">
        <img src="https://stackoverflow.com/questions/9547291/header_logo.png" id="vipcentral_logo">
        <img src="intel_logo.png" id="intel_logo"/>
    </div>
</body>

So sieht es aus (ich habe rote Pfeile eingefügt, um das zusätzliche Leerzeichen explizit hervorzuheben):

Ich hatte erwartet, dass die blaue Farbe direkt an den Rändern und der Symbolleiste des Browsers anliegt. Die Bilder sind beide genau 64 Pixel hoch und haben dieselbe Hintergrundfarbe wie das Bild, das #header_div zugewiesen ist. Jede Information wäre sehr willkommen.

Question 2

body hat standardmäßig 8px Ränder: http://www.w3.org/TR/CSS2/sample.html

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

Oder Sie könnten dies nützlich verwenden Globaler Reset

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

Wenn Sie etwas weniger wollen * global als:

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

manch andere CSS-Reset:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/

…

Question 3

Versuchen Sie, die Auffüllung/Ränder aus dem Body-Tag zu entfernen.

body{
padding:0px;
margin:0px;
}

Question 4

Versuchen Sie, Folgendes in Ihr CSS aufzunehmen:

body, html{
    padding:0;
    margin:0;
}

Question 5

Das ist der Standardrand/-abstand der body Element.

Einige Browser haben einen Standardrand, andere eine Standardauffüllung, und beide werden als Auffüllung im body-Element angewendet.

Fügen Sie dies zu Ihrem CSS hinzu:

body { margin: 0; padding: 0; }

Question 6

Ich habe festgestellt, dass dieses Problem auch dann fortbesteht, wenn der BODY MARGIN auf Null gesetzt wird.

Es stellt sich jedoch heraus, dass es eine einfache Lösung gibt. Alles, was Sie tun müssen, ist, Ihrem HEADER-Tag einen 1-Pixel-Rand zu geben und den BODY MARGIN auf Null zu setzen, wie unten gezeigt.

body { margin:0px; }

header { border:1px black solid; }

Wenn Sie H1-, H2-Tags in Ihrem HEADER haben, müssen Sie auch den MARGIN für diese Tags auf Null setzen, dadurch werden alle zusätzlichen Leerzeichen entfernt, die möglicherweise angezeigt werden.

Ich bin mir nicht sicher, warum das funktioniert, aber ich verwende den Chrome-Browser. Natürlich können Sie auch die Farbe des Rahmens an Ihre Kopffarbe anpassen.

Question 7

Gehen Sie damit

body {
    padding:0px;
    margin:0px;
}

Question 8

Ich hatte das gleiche Problem und mein erstes <p> Element, das sich oben auf der Seite befand und auch einen Browser-Webkit-Standardrand hatte. Dies hat mein gesamtes div nach unten gedrückt, was den gleichen Effekt hatte, von dem Sie gesprochen haben. Achten Sie also auf textbasierte Elemente, die sich ganz oben auf der Seite befinden.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body style="margin:0;">
      <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh">
<p>Text in Paragraph</p>
      </div>
    </div>
  </body>
</html>

Denken Sie also daran, alle untergeordneten Elemente zu überprüfen, nicht nur die HTML- und Body-Tags.