Carefully lobotomized owl

Die Lobotomized Owl ist eine schön kompakte Methode, um in CSS horizontale Abstände zwischen Elementen zu definieren. Im Detail kann man sie aber noch verbessern.

Die Methode hat für CSS zwei Effekte:

  • Abstände werden nach oben und nicht nach unten definiert. Denn tatsächlich haben z.B. Überschriften größere Abstände oberhalb, während der Abstand nach unten der eines regulären Absatzes ist.
  • Außerdem erzeugt das erste Element in einem anderen Element keine Abstände nach oben. Damit wird verhindert, dass z.B. Überschriften am Anfang einer Box auch noch Platz nach oben reservieren. Im Umkehrschluss gibt es auch keine überflüssigen Abstände nach unten, da es einfach gar keine Abstände nach unten gibt.

Die lobotomisierte Eule sieht als CSS-Selektor aus wie * + *. Das ist aber sehr global, so dass ich für mich gerne die etwas sorgfältiger lobotomisierte Eule einsetze:

* {
  margin: 0;
  padding: 0;
}
* + h1, * + h2, * + h3, * + h4 {
  margin-top: 1.2em; 
}
* + p, * + ul, * + ol, * + table {
  margin-top: 0.5em; 
}
* + li {
  margin-top: 0.2em;
}

Damit steuert man haarklein, welches Element welche Abstände nach oben bekommt. Das sieht dann wie folgt aus: