Alles, was Sie über die Lücke nach dem Listenmarker wissen müssen

Erkundung von Listenmarker-Styling-Macken: Das Geheimnis des Post-Marker Gap

Während ich den Artikel "Creative List" von Google in Web.dev Blog untersucht habe, bin ich auf ein faszinierendes Detail in den Code -Beispielen des Abschnitts ::marker gestoßen. Das ::marker Pseudoelement, das die Anpassung von Listenmarkern ermöglicht, präsentierte eine besondere Lösung zum Hinzufügen von Abstand nach einem benutzerdefinierten SVG-Marker:

::marker {
  content: url('/marker.svg') ' ';
}

Der an die url() angehängte Space -Zeichen ("") erstellt die Lücke. Dies fühlte sich weniger als ideal an; CSS bietet margin und padding für den Abstand. Mein erster Versuch, den Speicherplatz durch ein margin-right zu ersetzen, ist fehlgeschlagen:

::marker {
  content: url('/marker.svg');
  margin-right: 1ch;
}

::marker 's Limited CSS-Eigenschaftsunterstützung (hauptsächlich textbezogen) verhindert, dass margin und padding wie erwartet funktionieren.

Dies führte zu einer tieferen Untersuchung zur Schaffung von Lücken nach dem Marker.

Polsterung und Ränder auf <li> und <ol></ol> Elementen:

Experimente zeigten, dass padding-left auf <li> Elementen den Spalt nach den Marker erhöht (wenn list-style-position: outside). Andere Polster- und Randeigenschaften beeinflussen die Einbringer. Auch bei padding-left: 0px bleibt eine Browser-abhängige Mindestlücke bestehen.

list-style-position: inside:

Verschieben des Markers in Das Listenelement mit list-style-position: inside verändert das Verhalten. padding-left wirkt sich nun den Abstand vor vor der Marker aus und beseitigt die Kontrolle über die Nachmarktlücke. Darüber hinaus verdreifacht ein Chromwanzen die Lückengröße in diesem Szenario. Browser -Inkonsistenzen in der Lückengröße sind ebenfalls offensichtlich.

Das folgende Bild zeigt die Standard -Rendering -Unterschiede zwischen Browsern für sowohl outside als auch inside Markierungspositionierung:

[Bildvergleich der Browser -Rendering von Listenmarkierungen würde hier sein]

benutzerdefinierte Marker:

Verwenden von list-style-type oder die content Eigenschaft auf ::marker zum Definieren von benutzerdefinierten Markern führt weitere Nuancen ein. Während content eine größere Flexibilität bietet, erfordert die mangelnde Unterstützung von Safari list-style-type für eine breitere Kompatibilität. Das Ersetzen der Standardkugel durch "•" (U 2022 -Kugel) entfernt die minimale Lücke und schrumpft die Markierungsgröße. Das Anpassen von font-size auf ::marker verursacht vertikale Fehlausrichtung, während font-family Änderungen die Markergröße beeinflussen und eine potenzielle Problemumgehung anbieten können. Der Chrom -Fehler fehlt bei Verwendung benutzerdefinierter Marker mit list-style-position: inside.

Schlüsselergebnisse:

<li> Browser anwenden Standard padding-inline-start auf <li> und <ol></ol>. <li> Eine Mindestlücke besteht nach eingebauten Markern, aber nicht nach benutzerdefinierten. <li> padding-left auf <li> steuert die Lücke nach dem Markt nur mit list-style-position: outside. <li> benutzerdefinierte String-Marker sind kleiner als eingebaute Marker. font-family Einstellungen können die Größe erhöhen.

Schlussfolgerung:

Der Space -Zeichen im ersten Codebeispiel ist eine erforderliche Problemumgehung. Das Fehlen von margin und padding Unterstützung bei ::marker, insbesondere wenn list-style-position: inside, begrenzt die Kontrolle über den Abstand nach dem Markt. Bis ::marker, die eine breitere CSS-Immobilienunterstützung gewinnt, können Workarounds wie die Verwendung eines ::before -Pseudoelements für die Markeremulation erforderlich sein. Verbesserte ::marker Funktionalität ist sehr wünschenswert.

Das obige ist der detaillierte Inhalt vonAlles, was Sie über die Lücke nach dem Listenmarker wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!