web-dev-qa-db-de.com

CSS: Wie kann ich das Standardfenster "Padding" entfernen? Ein Element mit einer Breite von 100% erreicht nicht die Grenzen des Fensters

Ich habe also ein Element, das direkt im Körper platziert wird:

<body>
    <div id="header">Some stuff...</div>
    Other stuff...
</body>

Folgendes ist das verwendete CSS:

body{
    text-align:center;
}
#header{
    margin:auto;
}

Das #header div ist also auf 100% width (Standard) gesetzt und zentriert. Problem ist, es gibt ein "Leerzeichen" zwischen dem Fensterrahmen und dem #Header-Element ... Wie:

|  |----header----|   |
^window border        ^window border

Ich habe versucht, es mit Javascript anzupassen, und die Größe des Elements wurde erfolgreich auf die exakte Fensterbreite geändert. Das Leerzeichen wird jedoch nicht entfernt:

$('#header').width($(window).width());

Eine Lösung scheint zu sein, die folgenden CSS-Regeln hinzuzufügen (und das obige Javascript beizubehalten):

#header{
    margin:auto;
    position:relative;
    top:-8px;
    left:-8px;
}

In meinem Browser ist dieses "Leerzeichen" 8px - aber ich bin nicht sicher, ob das für alle Browser gleich ist. Ich verwende Firefox unter Ubuntu ...

Also, was ist der richtige Weg, um diesen Raum loszuwerden - und wenn es das ist, was ich oben verwendet habe, verhalten sich alle Browser gleich?

25
Alex

body verfügt über Standardränder in allen Browsern. Sie müssen sie also nur abschneiden:

body {
    margin: 0;
    text-align: center;
}

Sie können dann die negativen Ränder von #header entfernen.

48
BoltClock

Ein einfacher Weg, dieses Problem zu lösen, besteht darin, alle Ränder zu beseitigen. Und Sie können das durch den folgenden Code tun:

* {
    margin:0;
}

Dies löst das Problem und gibt Ihnen die Kontrolle über die Ränder aller Elemente. 

10
Bups

Fügen Sie diese in style dem body-Tag hinzu, z. B. dem folgenden:

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

Es hat für mich funktioniert. Viel Glück!!

2
Tharindulucky

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

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.

0
wardheed