Entfernen von Körper Rand in CSS

Ich bin neu in der Web-Entwicklung, und ein Problem beim Entfernen von Rand des Körpers.Entfernen von Körper Rand in CSS

There's space between the very top and "logo" Es gibt Platz zwischen dem oberen Ende des Browsers und "Logo" Text. Und mein Code ist here on jsbin.

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

Quelle

2015-05-13 chenghuayang

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing –

Ich würde sagen, dass die Verwendung von:

* { 
    margin: 0; 
    padding: 0; 
}

eine schlechte Art und Weise ist diese zu lösen.

Der Grund für den h1-Rand, der aus dem übergeordneten Element herauskommt, 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.

Zurücksetzen Alle Polsterungen und Ränder auf 0 können eine Menge Nebenwirkungen verursachen. Dann ist es besser, Rand oben für diese spezifische Überschrift zu entfernen.

Quelle

2015-05-13 07:45:23 andeersg

Welche Art von Nebenwirkungen? Das Einzige, was ich weiß, ist, dass es besser wäre, wenn die Performance wie folgt zurückgesetzt wird: body, div, p, a, img, h1, h2 .... {padding: 0; margin: 0;} – davedadizzel

Sie müssen mehr arbeiten, um Ränder und/oder Padding auf die Elemente, auf denen Sie es wollen, anzuwenden (Sie haben die volle Kontrolle, aber Sie müssen mehr arbeiten). Natürlich ist dies alles eine Vorliebe der Person, die es programmiert, aber für mich mag ich "normalize.css" besser als "reset.css". – andeersg

Yup. Ich habe schon davon gehört. Vielleicht ist der Versuch, normalize zu verwenden, zielgerichteter für das Zurücksetzen von Rand/Abstand. Vielen Dank! – chenghuayang

Sie haben immer noch einen Spielraum auf Ihrem h1 Tag bekommen

Sie müssen also, die wie folgt entfernen:

h1 { 
margin-top:0; 
}

Quelle

2015-05-13 07:29:39

Das Problem ist, mit dem h1 Kopfrand. Sie müssen dies versuchen:

h1 { 
margin-top:0; 
}

Quelle

2015-05-13 07:30:18

Dies sollte Sie loswerden Körper Margen und Standard oberen Rand von <h1> Tag

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

h1 { 
     margin-top: 0px; 
    }

Quelle

2015-05-13 07:34:18

erhalten helfen empfehle ich Ihnen, alle HTML-Elemente zurücksetzen, bevor Sie Ihre CSS mit Schreiben : *{ margin: 0; padding: 0; }

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

Quelle

2015-05-13 07:35:01 Florin

Sie können body oder * verwenden, um Rand und Padding 0px;

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

Quelle

2015-05-13 07:37:25 Vinayak

Die richtige Antwort für diese Frage ist "css reset".

Es entfernt alle Standard-Marge und Polsterung für jedes Objekt auf der Seite, keine Sperre ausgeschlossen, unabhängig vom Browser.

Quelle

2015-05-13 07:37:54 Darian

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

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

Um Probleme wie diese allgemein zu lösen, empfehle ich, dev tools Ihres Browsers zu verwenden. 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 "Element prüfen". Auf der Registerkarte "Stile" ganz unten haben Sie ein CSS-Box-Modell. Dies ist ein großartiges Werkzeug für die Visualisierung von Grenzen, Padding und Margen und welche Elemente sind die Ursache Ihrer Styling-Kopfschmerzen.

Quelle

2015-05-13 08:09:56

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

Sie können auch die MARGIN auf Null für jeden H1, H2, usw. Elemente, die Sie in Ihrem HEADER div haben ändern müssen. Dies wird jeden zusätzlichen Raum, der sich um den Text herum zeigen kann, entfernen.

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:31:27 wardheed

-1

entfernen Sie einfach den Browser-Standard Margin und Padding Bewerben Top Of Your Css.

<style> 

* { 
    margin: 0; 
    padding: 0; 
} 

</style>

HINWEIS:

versuchen, alle html elements Zurücksetzen vor Ihrer CSS zu schreiben.

OR [Use This In Your Case]

<style> 

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

h1 { 
     margin-top: 0px; 
    } 

</style>

DEMO:

<style> 
 

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

 
h1 { 
 
     margin-top: 0px; 
 
    } 
 

 
</style>

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <h1>logo</h1> 
 
</body> 
 
</html>

Quelle

2017-07-04 21:18:47

Antwort

Verwandte Themen