목록 마커 이후의 간격에 대해 알아야 할 모든 것

목록 마커 스타일링 Quirks 탐색 : 마커 후 갭의 미스터리 Google의 Web.dev Blog의 "Creative List Styling"기사를 탐색하는 동안 섹션의 코드 예제에서 흥미로운 세부 사항을 우연히 발견했습니다. 목록 마커의 사용자 정의를 허용하는

pseudo element는 사용자 정의 SVG 마커 후 간격을 추가하기위한 독특한 솔루션을 제시했습니다.

함수에 추가 된 공간 문자 ( "")는 간격을 만듭니다. 이것은 이상적이지 않다고 느꼈습니다. CSS는 간격을 위해 및 ::marker를 제공합니다. 공간을 ::marker로 교체하려는 초기 시도 :

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

의 제한된 CSS 속성 지원 (주로 텍스트 관련)은 예상대로 작동하지 않습니다. 이로 인해 마커 후 갭을 만드는 데 더 깊은 조사가 이루어졌습니다.

패딩 및 마진에서 및 url() 요소 : 실험에 따르면 elements on ()가 증가 함이 밝혀졌습니다. 다른 패딩 및 마진 특성은 계약에 영향을 미칩니다. 가 있더라도 브라우저 의존적 최소 간격이 지속됩니다 margin : padding margin-right

를 사용하여 목록 항목을 변경하면 마커를 내부로 이동하면 동작이 변경됩니다. 는 이제 마커 이전의 간격

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

에 영향을 미쳐 마커 이후의 간격에 대한 제어를 제거합니다. 또한 크롬 버그는이 시나리오에서 갭 크기를 트리하게합니다. 갭 크기의 브라우저 불일치도 분명합니다 아래의 이미지는 및

마커 위치에 대한 브라우저의 기본 렌더링 차이를 보여줍니다. [목록 마커의 브라우저 렌더링 비교 이미지 여기에 갈 것입니다] 사용자 정의 마커 : ::marker 사용자 정의 마커를 정의하기 위해 또는 속성을 ​​사용하면 추가 뉘앙스가 소개됩니다. margin는 더 큰 유연성을 제공하지만 Safari의 지원 부족은 더 넓은 호환성을 위해 padding를 사용해야합니다. 기본 총알을 "•"(U 2022 총알)로 교체하면 최소 간격이 제거되고 마커 크기가 줄어 듭니다. 를 조정하면 수직 오정렬이 발생하지만

변경은 마커 크기에 영향을 줄 수 있으므로 잠재적 인 해결 방법을 제공합니다.

.

주요 결과 :

브라우저는 기본값 <li>에 ​​ 및 padding-inline-start를 적용합니다 내장 마커 후에는 최소 간격이 있지만 커스텀 마커는 아닙니다. on <li> 사용자 정의 문자열 마커는 내장 마커보다 작습니다. 조정은 크기를 증가시킬 수 있습니다 <ol></ol> 결론 : <li> 초기 코드 예제의 공간 문자는 필요한 해결 방법입니다. 특히 에 대한 및 지지대, 특히 <li>가 마커 후 간격에 대한 제어를 제한 할 때. padding-left가 더 광범위한 CSS 속성 지원을 얻을 때까지, 마커 에뮬레이션에 <li> pseudo element를 사용하는 것과 같은 해결 방법이 필요할 수 있습니다. 개선 된 기능성은 매우 바람직합니다. list-style-position: outside

위 내용은 목록 마커 이후의 간격에 대해 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!