Ich habe zum Spaß eine Umfrage ohne Kontext auf Twitter gepostet.
ok, legen wir los
— Chris Coyier (@chriscoyier) 1. Dezember 2016
Der implizite Kontext, wie wahrscheinlich die meisten CSS-Nerds vermuten würden, ist:
Um Elemente vertikal voneinander zu beabstanden, greifen Sie im Allgemeinen zu
margin-bottomam oberen Element oder zumargin-topam unteren Element?
61 % von rund 2.000 Stimmen sagten margin-bottom. Ich vermutete, dass es gewinnen würde, aber ich hatte nicht mit einem so knappen Ergebnis gerechnet. Das Web fühlt sich wie ein Medium an, das nach unten drückt, und ich würde sagen, es fühlt sich logischer/natürlicher an, den Abstand dem ersten Element zuzuweisen anstatt dem zweiten.
So oder so muss man oft den Abstand auf der einen oder anderen Seite entfernen. Ähnlich wie
.module > *:last-child {
margin-bottom: 0;
}
/* or */
.module > *:first-child {
margin-top: 0;
}Aber lesen Sie nicht zu viel hinein. Es gibt unzählige Möglichkeiten, Struktur, Abstände, Selektoren und all das zu handhaben. Ich meine nur: Es ist ein Unentschieden. Keines ist besser als das andere. Sie müssen auch nicht gegenseitig ausschließend sein, aber denken Sie daran, wie sie kollabieren.
Greg Whitworth wies darauf hin, dass margin-top tatsächlich einen knappen Vorsprung in "einer Bing-gestützten Dose mit 1.070.510 Seiten" hat.
Daten von hierAber wie Estelle Weyl anmerkte, kommt das hauptsächlich von Leuten, die diese Werte zurücksetzen, und nicht davon, dass sie sie aktiv für Abstände verwenden. Es wäre interessant, dieselben Daten mit Nicht-Null-Werten zu sehen.
Ich vermeide es, Dinge mit margin-top zu beabstanden, wo immer es geht. Das fühlt sich für mich schmutzig an. Ich benutze immer margin-bottom, es sei denn, es gibt einen guten Grund, es nicht zu tun.
Ich war früher ein margin-bottom-Typ, aber kürzlich bin ich auf die margin-top-Seite gewechselt, als wir auf Sassline umgestellt haben. Die Verwendung von margin-top führt letztendlich zu einem saubereren Styling. Kein Gebrauch mehr von last-child bei Absätzen, um den Rand des letzten Absatzes auf Null zu setzen. Es ist auch praktisch bei Überschriften. Jetzt setze ich die Ränder der Überschrift auf Null. Der margin-top des nächsten Elements setzt den korrekten Abstand zwischen Überschrift und Text, erlaubt aber auch gelegentliche Unterüberschriften dazwischen, ohne viele Ränder überschreiben zu müssen (da ich in den meisten Fällen keinen Rand zwischen der Überschrift und der Unterüberschrift möchte).
Ich würde argumentieren, dass aufgrund der drückenden Natur des Webs und der kaskadierenden Stile die Anwendung von margin-top sinnvoller ist als margin-bottom. Das erste Element ist sich des nächsten Elements nie wirklich bewusst. Es ist viel einfacher, ein Element auf das vorhergehende Element aufmerksam zu machen.
Ich versuche immer, margin-top zu verwenden. Es fühlt sich für mich einfach logischer an, dass sich das Element darunter von den Elementen darüber distanzieren sollte, und nicht umgekehrt.
Ich benutze schon seit langer Zeit margin-bottom, überlege aber, zu margin-top zu wechseln. Der Grund dafür ist, dass man dann den
+Selektor verwenden kann, um den Abstand zwischen zwei benachbarten Komponenten zu definieren. Zum BeispielIch verstehe immer noch nicht, was an margin-bottom besser sein soll als an margin-top. Ist es nicht logisch, von oben nach unten zu arbeiten? Kann jemand ein Beispiel posten, das Perspektive gibt?
Ich habe zuerst doppeltes margin-top und margin-bottom für vertikale Rhythmen verwendet (mit diesem Werkzeug http://soqr.fr/vertical-rhythm/ ), aber das ist etwas offensichtlich zu verwalten.
Meistens bevorzuge ich jetzt nur margin-bottom für alles (einschließlich vertikaler Rhythmen).
Ich benutze einfach, was im Moment am besten für mich ist, es hängt vom Projekt ab, und man kann nicht sagen, dass eines logischer ist als das andere. Außerdem benutze ich manchmal beides, wenn es nötig ist, ich lebe nicht gerne in einer Box
Ich neige dazu, Heydon Pickering's Lobotomized Owls Technik zu verwenden, oder eine davon abgeleitete bastardisierte Version. Das bedeutet letztendlich die Verwendung eines Geschwisterselektors und das Hinzufügen eines
margin-topzum zweiten Element, und bedeutet, dass man niemals einen oberen oder unterenmargindes ersten oder letzten Kindes einer Sequenz negieren muss.Darum geht es! +1
+1 für diese Technik. Benutze sie jetzt seit ein paar Jahren (!!) und liebe sie immer noch.
Ich war ein margin-bottom-Typ, bis ich auf die großartige Lobotomized Owl (
* + * { margin-top: 1.5em; }) umgestiegen bin. Ich frage mich, wie viel Prozent der margin-top-Fraktion ähnlich denkt.Ich denke, dass für manche Leute der Grund, top anstelle von bottom zu wählen, darin liegt, dass man für IE8 und frühere Versionen nicht ":last-child" verwenden kann, sondern nur ":first-child", also verwenden unzählige Beispiele, Bibliotheken usw. stattdessen diese, und die Leute benutzen sie möglicherweise einfach aus Trägheit weiter.
Ich verwende nicht
weil es mehrere Probleme hat
– funktioniert nicht, wenn flex-direction: column-reverse verwendet wird
– funktioniert nicht, wenn die Faux-Block-Technik verwendet wird
Stattdessen verwende ich den Lobotomized Owl Selektor
Für mich bietet das die meiste Bequemlichkeit beim Abstand.
hat das nicht die gleichen Probleme?
Meistens bevorzuge ich jetzt nur margin-bottom für alles (einschließlich vertikaler Rhythmen).
Wie Chris im Artikel beschrieben hat, verwende ich für die meisten Dinge
margin-bottom&last-child, abgesehen von Grids, wo ichmarginoben und unten verwende, meistens, weil ich auch dasselbe für denmarginauf der x-Achse macheIch denke, Sie haben einen kleinen Tippfehler gemacht
Für Abwärtskompatibilität (IE7 & IE8) ohne browser-spezifisches CSS würde ich margin-top gefolgt von
Ich bin wohl altmodisch, so...
Warum nicht verwenden
oder
@Martin
Geringe/keine Unterstützung für :not in mobilen Browsern und IE.
@Marc Hoekstra,
Immer noch auf IE8- beschränkt? Igitt.
Ich habe bemerkt, dass Bootstrap v4
margin-bottombevorzugt.Diese Präferenz ist im Abschnitt Ansatz in der Dokumentation angegeben. Ich stimme zu, weil ich auch denke, dass das Web ein "von oben nach unten" Ort ist. Der vertikale Rhythmus wirkt konsistenter, und es ist einfacher, anderen im Team zu sagen: "Versuchen Sie Ihr Bestes,
margin-topzu vermeiden." Dieser Standard war besonders nützlich, wenn man zu einem Projekt zurückkehrt. Das gesagt, wir haben keine Kunden, die IE8-Unterstützung benötigen. Wenn Microsoft es nicht unterstützt, kümmern wir uns nicht darum.Ich werde ein Rebell sein und die Idee vorschlagen, den Randabstand gleichmäßig zwischen ihnen aufzuteilen. ;)
Ich benutze immer margin-bottom und akzeptiere kollabierende Ränder. Am Ende habe ich immer eine Menge Ränder, die sich über den Rand eines Abschnitts stapeln, aber meistens ist das genau das, was ich will.
Mein 2 Cent, ich musste mich kürzlich damit auseinandersetzen und fand, dass
padding-top(mit der Ergänzung vonmargin-topfür Trennlinien, die mit einembordererstellt wurden) eine wirklich gute Lösung für mich war.padding:– keine Kollisionsgefahr wie bei
margin– Sie können auch einen
border-topals Trennlinie setzen undmargin-topdarüber hinzufügentop:– da Sie den benachbarten Geschwisterselektor (
+) verwenden können, um den Wert entsprechend dem vorherigen Element anzupassen–
:first-child, um das erstepadding-topbei Bedarf zu entfernen oder zu reduzieren. Kompatibilität (CSS 2) IE7+ http://caniuse.com/#feat=css-sel2 im Vergleich zu:last-child(CSS 3) IE9+ http://caniuse.com/#feat=css-sel3Ich habe kürzlich einige Tests durchgeführt, um dies auf einem Projekt zu handhaben, und die Experimente finden Sie hier: http://codepen.io/OxyDesign/pen/VmEyKq?editors=1100
Dieses Experiment sollte die Grenzen der Idee testen. Ich habe mich dann schließlich für einen etwas anderen Weg entschieden. Jetzt hat der Container
padding: 0 @spacing @spacing @spacing;und die Abschnitte habenpadding-top: @spacing;außer denen, die eine Entschädigung für die Zeilenhöhe benötigen, sie habenpadding-top: @spacing - @text-spacing; margin-bottom: - @text-spacingund bisher funktioniert es sehr gut.