인라인 차단 목록 항목 사이에 원하지 않는 공백이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?

원치 않는 공백이 있는 인라인 차단 목록 항목

인라인 차단 목록 항목 사이에 불필요한 공백이 표시되어 원활한 생성을 방해하는 경우가 많습니다. 메뉴.

원인 공백

인라인 블록은 공백에 의존하며 글꼴 설정에 의존합니다. 기본적으로 글꼴에는 문자 사이에 렌더링되는 약간의 공백(일반적으로 4px)이 있습니다. 이는 인라인 블록 요소 사이의 공백으로 나타날 수 있습니다.

솔루션

Run Lines Together

한 가지 옵션은 제거하는 것입니다. 한 줄의 코드로 모든 목록 항목을 실행하여 공백을 만듭니다.

차단 끝 및 시작 태그

또는 끝 및 시작 태그를 함께 차단합니다.

<ul>
    <li><div>first</div></li><li><div>second</div></li>
    <li><div>third</div></li><li><div>fourth</div></li>
</ul>

글꼴 크기 재설정 및 재설정

권장 연습은 부모 요소에서 글꼴 크기를 0으로 재설정하고 인라인 블록에서 원하는 값으로 다시 재설정하는 것입니다. 요소:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

이 접근 방식은 글꼴의 공백 설정을 재설정하고 새로운 내용을 추가하여 간격 문제를 해결하는 동시에 HTML 가독성을 유지합니다.

위 내용은 인라인 차단 목록 항목 사이에 원하지 않는 공백이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!