webentwicklung-frage-antwort-db.com.de

So entfernen Sie den Leerraum um den Körper oder löschen Sie die standardmäßigen CSS-Stile

Ich bin zwar ein Anfänger, habe aber auch ziemlich viel gesucht, bevor ich das gepostet habe. Es scheint mehr Platz um mein div Element zu geben. Ich möchte auch darauf hinweisen, dass ich viele Kombinationen von Rahmen: 0, Polsterung: 0 usw. ausprobiert habe, und nichts schien den weißen Raum zu beseitigen.

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="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 den zusätzlichen Speicherplatz explizit zu nennen):

Extra space around a div element

Ich hatte erwartet, dass die blaue Farbe direkt an den Browser-Rändern und der Symbolleiste anliegt. Die Bilder sind beide genau 64 Pixel groß und haben dieselbe Hintergrundfarbe wie diejenige, die #header_div zugewiesen wurde. Jede Information wäre sehr dankbar.

htmlcssmargincss-reset
25
Anthony

body hat Standardränder: http://www.w3.org/TR/CSS2/sample.html 

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

Oder Sie könnten dieses nützliche Global Reset verwenden. 

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

Wenn Sie etwas weniger möchten, *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;
}

einige 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/
…

38
Roko C. Buljan

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

body{
padding:0px;
margin:0px;
}
8
Kevin Bowersox

versuchen Sie, Folgendes in Ihrem CSS anzuzeigen:

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

Dies ist der Standardrand/-abstand des body-Elements.

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

Fügen Sie dies Ihrem CSS hinzu:

body { margin: 0; padding: 0; }
3
Guffa

Ich stellte fest, dass dieses Problem auch dann bestand, wenn die KÖRPER-MARGE auf Null gesetzt wurde.

Es stellt sich jedoch heraus, dass es eine einfache Lösung gibt. Sie müssen Ihrem HEADER-Tag lediglich eine 1px-Umrandung zuweisen und den BODY MARGIN wie unten gezeigt auf Null setzen.

body { margin:0px; }

header { border:1px black solid; }

Wenn Sie H1-, H2-, Tags in Ihrem HEADER haben, müssen Sie auch MARGIN für diese Tags auf Null setzen. Dadurch wird jeglicher zusätzlicher Platz entfernt, der möglicherweise angezeigt wird.

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

2
wardheed

Geh mit diesem

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

Ich hatte das gleiche Problem und mein erstes <p>-Element, das sich oben auf der Seite befand und außerdem einen Browser-Webkit-Standardrand hatte. Dies drückte mein gesamtes Div nach unten, was den gleichen Effekt hatte, von dem Sie sprachen, also achten Sie auf textbasierte Elemente, die ganz oben auf der Seite stehen.

<!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 und nicht nur die HTML- und Body-Tags zu überprüfen.

0
Daniel