CSS: Wie kann ich das Standardfenster "Padding" loswerden? Ein Element auf 100% Breite eingestellt nicht die Grenzen des Fensters erreicht

So habe ich ein Element, das direkt im Körper platziert wird:CSS: Wie kann ich das Standardfenster "Padding" loswerden? Ein Element auf 100% Breite eingestellt nicht die Grenzen des Fensters erreicht

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

Im Folgenden ist der CSS verwendet:

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

So Das #header-div wird auf 100% Breite (Standard) gesetzt und zentriert. Das Problem ist, gibt es einen „Raum“ zwischen dem Fensterrahmen und dem #header Element ... wie:

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

Ich versuchte es mit Javascript Einstellen und Verändern der Größe erfolgreich das Element auf die genaue Fensterbreite, aber es nicht den "Raum" beseitigen:

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

Eine Lösung scheint die folgenden CSS-Regeln (und halten Sie die Javascript oben) zu sein hinzuzufügen:

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

In meinem Browser dieses "space" ist 8px - Aber ich bin mir nicht sicher, ob das in allen Browsern gleich ist? Ich benutze Firefox auf 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?

Quelle

2010-12-31 Alex

body hat Standardränder auf allen Browsern, so alles, was Sie tun müssen, ist sie abrasieren:

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

Sie können dann die negativen Margen aus #header entfernen.

Quelle

2010-12-31 12:55:25 BoltClock

Oh mein, ich habe versucht, Körperpolsterung zu entfernen, aber ich dachte nicht an Marge ... Ich dachte, Körper war ein bisschen die gleiche Sache wie das Fenster, und dass ihre "Grenzen" wo an der gleichen Stelle befindet. .. ich weiß nicht, ob das verständlich ist. ^^ Danke trotzdem! – Alex

@Alex: Das Element, das mehr mit dem * Browser-Ansichtsfenster * verwandt ist (sozusagen) ist 'html', nicht' body'. Überprüfen Sie [diese Antwort] (http: // stackoverflow.com/questions/4565942/sollte-global-css-styles-sein-set-on-the-html-element-oder-das-body-element/4565959 # 4565959) für mehr. – BoltClock

diese den style Tag in body, hinzufügen wie die folgenden:

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

Es ist für mich gearbeitet. Viel Glück!!

Quelle

2012-12-21 07:15:35 Tharindulucky

Eine einfache Möglichkeit zur Lösung dieses Problems besteht darin, alle Ränder zu entfernen. Und Sie können durch den folgenden Code tun:

* { 
    margin:0; 
}

Das wird das Problem lösen und werden Sie eine feinere Kontrolle über die Ränder aller Elemente geben.

Quelle

2013-08-28 02:59:07 Bups

Es sollte angemerkt werden, dass dies eine Overkill-Lösung ist und in einigen Fällen langsam sein kann. –

Ich fand dieses Problem auch bei der Einstellung der BODY MARGIN auf Null.

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

body { margin:0px; } 

header { border:1px black solid; }

Nicht sicher, warum das funktioniert, aber ich verwende Chrome-Browser. Natürlich können Sie auch die Farbe des Rahmens ändern, um sie an Ihre Kopffarbe anzupassen.

Quelle

2015-11-02 12:13:13 wardheed

CSS: Wie kann ich das Standardfenster "Padding" loswerden? Ein Element auf 100% Breite eingestellt nicht die Grenzen des Fensters erreicht

Antwort

Verwandte Themen