내 인라인 차단 목록 항목에 원하지 않는 여백이 있는 이유는 무엇입니까?

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

문제:
설명할 수 없는 여백을 나타내는 인라인 차단 목록 항목이 있습니다. CSS에서 여백을 0으로 설정했음에도 불구하고 규칙.

원인:
이 문제는 display: inline-block; 사용 시 발생합니다. 목록 항목의 경우. 인라인 블록 요소는 공백에 민감하며 각 요소 오른쪽에 4px 여백을 적용합니다.

해결책 1: float: left;
여백을 제거하려면 디스플레이를 변경하세요. 부동 속성: 왼쪽;. 이렇게 하면 인라인 블록으로 인해 발생하는 공백이 제거됩니다.

해결책 2: 공백 방지
또는 목록 사이의 모든 공백을 제거하여 공백이 인라인 블록 요소에 영향을 미치는 것을 방지할 수 있습니다. 아래 표시된 항목 태그:

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

또 다른 해결 방법: 끝 및 시작 차단 태그
끝 태그와 시작 태그를 함께 차단하여 목록 항목을 하나의 연속된 줄로 처리하도록 할 수도 있습니다.

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

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