Odstęp wyróżnika wykazu {marker-offset}

(nieinterpretowane)

selektor { marker-offset: odstęp }

Polecenie to pozwala nam w sposób jawny zdefiniować odstępy markerów od treści wykazu.

UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1. Nie jest interpretowane!

Przykład {marker-offset}

li:before {
	display: marker;
	marker-offset: 3em;
}

Wyróżnik obrazkowy w tle

Istnieje jednak dość prosty, lecz być może nie tak oczywisty, sposób zastąpienia nieobsługiwanej własności marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie:

ul, li {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

ul li {
	background: url(marker.gif) no-repeat left top;
	padding-left: 20px;
}

Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej deklaracji jest wymagana we wszystkich przeglądarkach, jednak tylko taki zestaw daje prawie pewność, że otrzymamy to, o co nam chodziło. Dlatego nie radzę niczego pomijać!

Druga reguła formatuje elementy li zawierające się wewnątrz znacznika ul w taki sposób, aby wyglądały jak zwyczajny wykaz. Jednak dodatkowo dostajemy możliwość wpływu na pozycję markera. Sztuczka polega na zastąpienia tradycyjnego wyróżnika wykazu specjalnie przygotowanych obrazkiem, który wstawiamy w tle elementów li. CSS daje możliwość określenia tła właściwie dla każdego elementu, a dodatkowo można ustalić, aby nie było ono powtarzane oraz określić dokładną jego pozycję. Na koniec pozostaje tylko wykonanie wolnej przestrzeni z lewej strony punktów wykazu, tak aby zmieściły się tam obrazki markerów - tutaj właśnie można określić dowolny interesujący nas odstęp pomiędzy wyróżnikami wykazu a treścią poszczególnych punktów.

Jeżeli chcemy dodatkowo ustalić margines z lewej strony wykazu, możemy to zrobić dodając deklarację margin-left do elementu ul (lub ewentualnie li). Analogicznie można dodać margines przed/po całym takim wykazem, oddzielający go od sąsiadującej treści, czy nawet odstępy pomiędzy poszczególnymi punktami wykazu.

Warto zauważyć, że ten sposób pozwala również dokładnie określić pionową pozycję markera, co przy wykorzystaniu tradycyjnych metod nie jest możliwe, a właśnie wtedy sprawia to największe problemy, gdyż różne przeglądarki ustawiają obrazkowe wyróżniki wykazów w odmienny sposób - kilka pikseli wyżej lub niżej niż w innych.

Przykład

• Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
• Punkt drugi
• Punkt trzeci

• Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
• Punkt drugi
• Punkt trzeci

• Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
• Punkt drugi
• Punkt trzeci