Abstände am unteren Rand von Modulen

Editor's Note: Suchen Sie nach einer moderneren Methode, um konsistente Abstände am unteren Rand zwischen Elementen zu erzielen? Heydon Pickerings „Lobotomized Owl“-Selektor ist eine gute Methode, während wir auf die Unterstützung der Eigenschaft margin-trim warten.

Ah, das bescheidene Modul! Viele Designs heutzutage nutzen Module sowohl in Content- als auch in App-ähnlichen Websites. Ein Informationsblock, eine Anzeige, eine gruppierte Funktionalität... das kann alles sein. Die Tatsache, dass sie wahrscheinlich visuelle Ähnlichkeiten aufweisen, aber alles enthalten können, führt zu einer interessanten CSS-Herausforderung: Wie polstert man das Innere konsistent?

Hier ist ein einfaches Beispiel, bei dem das Modul durch Farbunterschiede vom Hintergrund abgehoben wird

html {
  background: #333;
}
.module {
  width: 20rem;
  padding: 1.5rem;
  margin: 1.5rem auto;
  background: white;
}

Aber sobald dieses Modul andere Elemente enthält, können die Abstände „verkehrt“ werden.

Der Absatz wird sehr wahrscheinlich einige globale Typografieregeln darauf angewendet bekommen, die sehr wahrscheinlich einen unteren Rand haben. Selbst wenn Sie sich für Opt-in-Typografie entscheiden, würden Sie sich hier wahrscheinlich dafür entscheiden, da Text vorhanden ist.

 

Sehen Sie die starke untere Polsterung? Vielleicht ist das in Ordnung für Sie, aber ich vermute nicht. Diese Schwere rührt von der konsistenten Polsterung, die Sie dem Modul selbst gegeben haben, *plus* dem unteren Rand des Absatzes.

 

Was tun wir also hier? Ein unsauberer Schnellschuss wäre, die Ränder dieser Absätze zu entfernen.

.module p {
  margin: 0;
}

Aber ich bin sicher, wir sind uns einig, dass das ziemlich unschön ist. Was ist, wenn ein Modul zwei Absätze enthält? Jetzt stoßen sie unbeholfen aufeinander.

Vielleicht nur der letzte?

.module p:last-child {
  margin: 0;
}

Das könnte funktionieren. Aber diese Lösung fühlt sich immer noch ein wenig nachgebastelt an. Was ist, wenn das Problem-Element eines Tages gar kein Absatz ist? Es könnte ein

• oder

 

• • sein. Oder

 

sein. Oder jedes andere HTML-Element... Werden wir jedes einzelne HTML-Element auflisten?

 

.module p:last-child,
.module ul:last-child,
.module ol:last-child,
.module dl:last-child {
  /* losing battle */
  margin: 0;
}

Das ist definitiv ein Kampf, den man verliert.

Aber wir könnten jedes Element ansprechen...

.module *:last-child {
  margin: 0;
}

Sie könnten sogar das „*“ dort weglassen, da es impliziert ist und keine Spezifität hat, aber ich denke, es macht es klarer. Ich denke, das kommt einer guten Lösung nahe, aber es ist ein wenig übertrieben. Listen haben immer Kindelemente, die davon betroffen wären. Alles mit Nachkommen wäre ein Problem. Um das zu beheben, stellen wir nur sicher, dass nur das oberste Element unter dem Modul diese Behandlung mit dem Kindselektor erhält.

.module > *:last-child {
  margin: 0;
}

Das ist in Ordnung. Ich würde es immer noch nicht perfekt nennen, da Nachkommen tatsächlich die Ursache für die zusätzliche untere Polsterung sein könnten. Zum Beispiel, wenn die Listenelemente Absätze enthalten. Sie könnten sie ein paar Mal verketten, um eine angemessene DOM-Tiefe zu erreichen.

.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
  margin: 0;
}

Das könnte es sein.

Hier ist eine visuelle Demo

Sehen Sie den Pen JFynD von Chris Coyier (@chriscoyier) auf CodePen

---

Ein völlig anderer Ansatz wäre, die untere Polsterung des Moduls wegzulassen und die Kindelemente dafür sorgen zu lassen, aber das erscheint mir etwas riskant, da keine Garantie besteht, dass das Kindelement seine eigene mitbringt (z. B. ein generisches