webentwicklung-frage-antwort-db.com.de

Körperrand in CSS entfernen

Ich bin ein Neuling in der Webentwicklung und habe ein Problem beim Entfernen der Körpergrenze. 

There's space between the very top and "logo" Zwischen dem oberen Rand des Browsers und dem "Logo" -Text ist Platz. Und mein Code ist hier bei Jsbin .

Ist body { margin: 0;} falsch, wenn ich das Leerzeichen entfernen möchte?

htmlcssmarginspace
20
piskebee

Ich würde sagen, dass mit:

* {
  margin: 0;
  padding: 0;
}

ist ein schlechter Weg, dies zu lösen.

Der Grund für das Herausspringen der h1-Marge aus dem übergeordneten Element ist, dass das übergeordnete Element keine Auffüllung hat.

Wenn Sie dem übergeordneten Element von h1 eine Auffüllung hinzufügen, befindet sich der Rand innerhalb des übergeordneten Elements.

Das Zurücksetzen von all paddings und Rändern auf 0 kann zahlreiche Nebenwirkungen verursachen. Dann ist es besser, die obere Kante für diese bestimmte Überschrift zu entfernen.

24
andeersg

Einige HTML-Elemente haben vordefinierte Ränder (nämlich: body, h1 bis h6, p, fieldset, form, ul, ol, dl, dir, menu, blockquote und dd).

In deinem Fall ist es das h1 verursacht dein Problem. Es hat { margin: .67em } standardmäßig. Wenn Sie den Wert auf 0 setzen, wird das Leerzeichen entfernt.

Um solche Probleme im Allgemeinen zu lösen, empfehle ich die Verwendung des dev tools Ihres Browsers. Für die meisten Browser: Klicken Sie mit der rechten Maustaste auf das Element, über das Sie mehr erfahren möchten, und wählen Sie "Inspect Element" (Element untersuchen). Ganz unten auf der Registerkarte "Stile" befindet sich ein CSS-Box-Modell. Dies ist ein großartiges Werkzeug zur Visualisierung von Rändern, Auffüllungen und Rändern und welche Elemente die Wurzel Ihrer Kopfschmerzen beim Stylen sind.

6
Björn Helgeson

Ich würde Ihnen empfehlen, alle HTML-Elemente zurückzusetzen, bevor Sie Ihre CSS mit schreiben: 

* {
    margin: 0;
    padding: 0;
}

Danach können Sie Ihre benutzerdefinierte CSS ohne Probleme schreiben. 

3
Spawn

Sie haben noch einen Rand in Ihrem h1-Tag

Also musst du das so entfernen:

h1 {
 margin-top:0;
}
2
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Das Problem betrifft den Kopfbereich von h1. Sie müssen dies versuchen:

h1 {
 margin-top:0;
}
1
Rahul Tripathi

Dies sollte Ihnen dabei helfen, die Körperränder und den voreingestellten oberen Rand des <h1>-Tags zu entfernen

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

h1 {
        margin-top: 0px;
    }
1
Mladen Oršolić

Sie können body oder * verwenden, um einen Rand und einen Abstand von 0px zu erstellen.

*{
margin: 0px;
padding:0px;
}
0
Vinayak

Die richtige Antwort auf diese Frage lautet "css reset".

* {
    margin: 0;
    padding: 0;
}

Es entfernt alle Standardränder und -abstände für jedes Objekt auf der Seite, es gibt keine Sperren, unabhängig vom Browser.

0
Darian

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

Möglicherweise müssen Sie auch die MARGIN für alle H1-, H2 usw. -Elemente in HEADER div auf null setzen. Dadurch wird zusätzlicher Platz entfernt, der um den Text herum 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.

0
wardheed