Warum fügt ul extra oberen Rand hinzu?
Ich habe eine einfache html-Seite mit etwas Stil darin und ich verstehe nicht, warum das einen oberen Rand hinzufügt?
Hier ist die Quelle:
Hier ist der "nervige" Platz.
Wenn ich "margin-top: 0;" zu dem der Raum ist weg ... aber ich bin nicht glücklich, bis ich verstehe warum.
7 Antworten
Der Rand von <ul> stammt von der Standardformulierung, die ein Browser dem Element hinzufügt. Wenn Sie zum Beispiel die DevTools von Chrome öffnen und das <ul> -Element untersuchen, sehen Sie das Styling so. Das User Agent-Stylesheet bezieht sich auf den Standard-Stil des Browsers. 1em der Marge wird 16px , da der Browser standardmäßig eine font-size: 16px hat.
Da das Standardstyling zwischen den Browsern nicht das gleiche ist, ist es ein gängiges Verfahren, ein Reset-Stylesheet zu verwenden, wie zum Beispiel Eric Meyer Setzen Sie CSS zurück oder Nicolas Gallagher's normalize.css , um diese Browser-Inkonsistenzen zu reduzieren.
Typisches Standard-UL-Design
%Vor%Wenn Sie plain vanilla css für Ihr html wollen, können Sie einige CSS in Ihrem Stylesheet
gemäß dieser Frage Standard-CSS-Stylesheets von Browsern
füge *{margin:0; padding:0;} hinzu, wodurch die von Browsern angegebenen Standardwerte margin und padding entfernt werden
oder Sie können auch reset.css
verwenden
Sheesh, lies die OP-Leute.
Ungeordnete Listen waren ursprünglich für den Inhalt auf der Seite gedacht, ebenso wie Absatz- und Überschriftenelemente. Sie haben Standard-Browser-Ränder, um zwischen den Textblöcken logische Leerräume zum leichteren Lesen anzuwenden.
- Dies ist eine Liste mit Aufzählungszeichen
- Dies ist ein weiterer Listeneintrag
- Beachten Sie den Abstand über und unter
Wenn es ohne Ränder zusammengebündelt wäre, würde die Welt verbrennen, das Universum würde zusammenbrechen, und die Menschen hätten Probleme, den Inhalt auf der Seite zu lesen, in Büchern und auf Plakaten und Fast-Food-Schalen usw.
Bei den angewandten Margen handelt es sich um eine Standardisierung über alle Medien hinweg. Drucken, Web, Yada. Deshalb ist es.
Nun wurden ungeordnete Listen in vielen anderen Bereichen des Internets eingeführt, um Navigation, Dropdowns und eine Fülle anderer Gimmicks anzugehen, weshalb alle wegen Resets schimpfen, weil ul für andere Zwecke verwendet werden können als das, was ursprünglich beabsichtigt war.
Wenn Sie sich aus irgendwelchen Gründen von der konventionellen Standardisierung lösen, dann kann ich persönlich keinen Reset empfehlen. Ich befürworte jedoch normalize.css , größtenteils - benutze nur das, was du brauchst, aber es ist bestrebt, die Unterschiede im Browser-Standardstyling zu "normalisieren", anstatt sie vollständig zu löschen.
Was ich wirklich empfehle, ist, dass Sie Ihre eigenen Stile basierend auf Ihren eigenen Bedürfnissen erstellen. Wenn Sie keine Ränder für Absätze, Überschriften und Listen möchten, schreiben Sie einfach:
%Vor%Es ist schlank, leicht und erfordert keine überladenen Einstellungen für Elemente, die Sie nicht verwenden. Verwenden Sie nur, was Sie brauchen. ODER noch besser, vielleicht möchten Sie die Standardränder irgendwann verwenden, stattdessen versuchen Sie:
%Vor% Nun kann jedes Element, bei dem Sie keinen oberen oder unteren Rand haben möchten, class="no-vmargin" anwenden. Dies ist nicht sehr semantisch und Sie sollten wahrscheinlich eine Klassifizierungsnamenskonvention befolgen, die auf Ihre Bedürfnisse zugeschnitten ist. Aber das ist ein anderes Thema.
Hier habe ich sogar eine Geige
gemacht Es sollte ein User-Agent-Stylesheet sein. Ihr Browser legt diesen Rand auf jedes <ul> -Element.
Hier stackoverflow
nachsehenSie können auch hier
überprüfenSie müssen Ihr CSS zurücksetzen oder jeder Browser verwendet für einige Elemente einige CSS-Standardregeln. Verwenden Sie eine Reset-CSS wie diese normalize.css oder ein ui-Framework wie bootstrap und Stiftung