Texte ausrichten

[Gunnar Bittersmann]

@@Rolf B

Was bei dem p Element vielleicht verwirren kann, ist die Verwendung von Eigenschaftsnamen, die relativ neu sind: margin-block-start und margin-block-end.

Verwirrend vielleicht für jene, die sich schon etwas mit CSS beschäftigt haben. Für Neulinge dürften die logischen Eigenschaften nicht mehr verwirrend sein als die physischen.

---

margin: 0.5em 0;

oder mit Verwendung der logischen Eigenschaft:

margin-block: 0.5em;

Aber das reicht noch nicht.

Richtig. Was da auch noch fehlt, geht aber in eine ganz andere Richtung als du dachtest. Nämlich, dass es nicht sinnvoll ist, den Abstand nach oben und nach unten gleichermaßen zu verringern.

Der Inhalt des p-Elements ist die Überschrift für die nachfolgenden Punkte. (Was nicht heißt, dass es ein h…-Element sein sollte.)

Diese Zusammengehörigkeit sollte natürlich visuell sichtbar gemacht werden: Das p-Element muss nach oben (zur vorigen Liste) einen größeren Abstand haben als nach unten (zur zugehörigen Liste). (Gestaltpsychologie, Gesetz der Nähe)

---

Natürlich kannst Du dem p-Element per try-and-error einen margin-left geben, der für Dich gut aussieht.

Sogenannte magic numbers. Ja, die sollte man tunlichst vermeiden.

Aber möglicherweise kommt dann ein anderer Font oder eine andere Skalierung vorbei und es passt wieder nicht mehr. Damit musst Du leben.

Es gibt so einiges, womit man leben muss. Die Ausrichtung der Listenpunkte gehört nicht dazu. Die sind einsfixdrei mit dem Text auf Linie gebracht: mit list-style-position: inside

Dort auch zu erkennen: der größere Abstand der Zwischenüberschrift nach oben.

Und auch: Abstand der einzelnen Listenpunkte voneinander, damit bei mehrzeiligen Listenpunkten die zusamengehörenden Zeilen als zusamengehörend wahrgenommen werden. (Gestaltpsychologie, Gesetz der Nähe) Symbolbild: Seite 4 von Bruce Springsteens Greatest Hits (Vinyl)

---

Hach ja, mehrzeilige Listenpunkte – die sehen bei list-style-position: inside unvorteilhaft aus. (Die Auskommentierung von min-width wegnehmen.)

Dem kann man mit per Pseudo-Element generierten Bullets begegnen.

Allerdings büßen da die li durch die geänderte display-Eigenschaft ihre Rolle als Listitems ein. Im Safari auch schon die Liste wegen list-style: none. Wenn die erhalten bleiben soll, müsste man diese explizit mit role-Attributen angeben. (Hab ich im Markup mal gemacht.)

Jolan tru