Semua yang anda perlu tahu mengenai jurang selepas penanda senarai

Meneroka Senarai Penanda Gaya Queirks: Misteri Gap Post-Marker

Semasa meneroka artikel Web.Dev Blog "List Styling" blog, saya tersandung dengan terperinci yang menarik dalam contoh kod bahagian

. Pseudo-elemen ::marker, yang membolehkan penyesuaian penanda senarai, menyampaikan penyelesaian yang khusus untuk menambahkan jarak selepas penanda SVG tersuai: ::marker

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

Karakter Angkasa ("") yang dilampirkan ke fungsi

membuat jurang. Ini kurang daripada ideal; CSS menawarkan url() dan margin untuk jarak. Percubaan awal saya untuk menggantikan ruang dengan padding gagal: margin-right

Sokongan Harta CSS terhad (terutamanya berkaitan teks) menghalang

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

dan

berfungsi seperti yang diharapkan. ::marker margin Ini membawa kepada siasatan yang lebih mendalam untuk mewujudkan jurang pasca penanda. padding

padding dan margin on

dan

elemen: <li> <ol></ol> Eksperimen mendedahkan bahawa pada

unsur meningkatkan jurang

selepas padding-left penanda (apabila <li>). Sifat padding dan margin lain mempengaruhi lekukan. Walaupun dengan , jurang minimum yang bergantung kepada penyemak imbas berterusan. list-style-position: outside padding-left: 0px

:

list-style-position: inside menggerakkan penanda di dalam

item senarai menggunakan

mengubah tingkah laku. kini mempengaruhi jarak sebelum list-style-position: inside penanda, menghapuskan kawalan ke atas jurang pasca penanda. Tambahan pula, bug kromium tiga kali ganda saiz jurang dalam senario ini. Tidak konsisten penyemak imbas dalam saiz jurang juga jelas. padding-left Imej di bawah menggambarkan perbezaan rendering lalai merentasi pelayar untuk kedua -dua dan

kedudukan penanda:

outside [Imej Membandingkan penyebaran penyemak imbas penanda senarai akan pergi ke sini] inside

penanda tersuai:

menggunakan atau harta

pada

untuk menentukan penanda tersuai memperkenalkan nuansa selanjutnya. Walaupun list-style-type menawarkan fleksibiliti yang lebih besar, kekurangan sokongan Safari memerlukan menggunakan content untuk keserasian yang lebih luas. Menggantikan peluru lalai dengan "•" (peluru U 2022) menghilangkan jurang minimum dan mengecilkan saiz penanda. Menyesuaikan ::marker pada content menyebabkan misalignment menegak, manakala perubahan boleh menjejaskan saiz penanda, menawarkan penyelesaian yang berpotensi. Bug kromium tidak hadir apabila menggunakan penanda tersuai dengan list-style-type. font-size ::marker font-family Penemuan Utama: list-style-position: inside

<li> Pelayar memohon lalai padding-inline-start ke <li> dan <ol></ol>. <li> jurang minimum wujud selepas penanda terbina dalam, tetapi bukan yang tersuai. <li> padding-left on <li> mengawal jurang pasca penanda hanya dengan list-style-position: outside. <li> Penanda rentetan tersuai lebih kecil daripada penanda terbina dalam. font-family pelarasan boleh meningkatkan saiz.

Kesimpulan:

Watak ruang dalam contoh kod awal adalah penyelesaian yang diperlukan. Kekurangan margin dan padding sokongan pada ::marker, terutamanya apabila list-style-position: inside, had kawalan ke atas jarak pasca penanda. Sehingga ::marker memperoleh sokongan harta CSS yang lebih luas, penyelesaian seperti menggunakan pseudo-elemen ::before untuk emulasi penanda mungkin diperlukan. Fungsi yang lebih baik ::marker sangat diinginkan.

Atas ialah kandungan terperinci Semua yang anda perlu tahu mengenai jurang selepas penanda senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!