Positionierung der Zeilen in einer Aufzählung

[Rolf B]

Hallo Sigrid,

das ul Element hat ab Werk einen oberen und unteren Margin von 1em und ein linksseitiges^[1] Padding von 40px.

D.h. mit einer padding-left padding-inline-start Angabe für ul kannst Du die Einrückung des Texts für die List-Items beeinflussen. Ein margin-left margin-inline-start oder margin-inline-end für das ul ist eher nicht nötig - oder nur dann, wenn das ul Element eine Border hat oder eine Hintergrundfarbe und es darum geht, damit von anderen Elementen Abstand zu halten (wofür aber zumeist andere Layouttechniken wie Grid angebracht sind).

Der Marker (also der Punkt vor den List-Items) ist davon unabhängig. Du kannst ihn innerhalb oder außerhalb des li-Elements platzieren (list-style-position), und du kannst ihn eingeschränkt über das ::marker-Pseudoelement stylen. Safari spielt dabei aber noch kaum mit, siehe den Caniuse-Link im Wiki.

Standardmäßig platzieren die Browser die Listenpunkte außerhalb der List-Items, mit einem bestimmten Abstand vor Beginn des li-Texts. D.h. wenn Du den Einzug vergrößerst, wandern die Listenpunkte mit. Um den Abstand der Listenpunkte vom Text zu vergrößern, kannst Du den li-Elementen ein entsprechendes Padding hinzufügen. Willst Du ihn verkleinern, musst Du mit ::marker arbeiten.

li::marker {
   content: "• ";
}

Der Punkt ist Unicodezeichen U+2022.

Ob es ein Unicodezeichen gibt, das dem regulären Listen-Bullet entspricht, weiß ich nicht; ich habe gerade keins gefunden. Leichtfertig mit font-size spielen sollte man aber nicht, das macht auch die Zeile höher.

Rolf

---

1. Bei rechts-nach-links Sprachen natürlich rechtsseitig, deshalb die Verwendung von padding-inline-start statt padding-left ↩︎