Firefox 및 Chrome에서 인라인 차단 목록 항목에 원치 않는 여백이 있는 이유는 무엇입니까?

인라인 차단 목록 항목의 원하지 않는 여백

주어진 HTML 및 CSS 코드에서 설명했듯이 인라인 주위에 원하지 않는 여백이 나타나는 현상 -차단 목록 항목이 관찰되었습니다. 이 문제는 Firefox 및 Chrome과 같은 브라우저에서만 발생하며 목록 항목 사이에 설명할 수 없는 빈 공간이 발생합니다.

범인은 디스플레이에 있습니다: inline-block; 목록 항목에 적용되는 속성입니다. 이 설정은 항목을 상위 컨테이너 내에서 흐르는 개별 블록으로 처리합니다. 그러나 inline-block 요소는 인라인 요소 사이의 기본 공백을 포함하는 공백 규칙을 상속합니다.

이 상황을 해결하려면 display: inline-block; 플로트 포함: 왼쪽;. 이 스위치를 사용하면 목록 항목을 추가 여백 없이 나란히 정렬할 수 있습니다.

또는 다음과 같이 모든 목록 항목을 한 줄에 배치하여 여백을 완전히 제거할 수 있습니다.

<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

또 다른 해결 방법은 HTML 태그를 함께 연결하는 것입니다.

<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

이러한 기술을 사용하면 주변에 불필요한 여백을 효과적으로 제거할 수 있습니다. 인라인 차단 목록 항목.

위 내용은 Firefox 및 Chrome에서 인라인 차단 목록 항목에 원치 않는 여백이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!