인라인 블록 요소 사이에 간격이 있는 이유는 무엇입니까?

인라인 블록 요소 간격 문제

인라인 블록 요소는 이름에서 알 수 있듯이 인라인 요소로 표시되지만 너비와 높이가 고정되어 블록 요소처럼 동작합니다. 그러나 어떤 경우에는 이러한 요소 사이에 예상치 못한 간격이 나타날 수 있습니다.

이 간격은 인라인 블록 요소가 공백에 종속되어 있기 때문에 발생합니다. 즉, 포함 요소에서 공백을 상속받습니다. 제공된 예에서:

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}

목록 항목 내의 텍스트에 사용되는 글꼴에는 기본 공백 설정(일반적으로 4px 공백)이 있습니다. 이 간격은 인라인 블록 요소에 의해 상속되므로 요소 사이에 불필요한 공백이 생깁니다.

이 문제를 해결하려면 다음과 같은 몇 가지 접근 방식을 취할 수 있습니다.

• 목록 항목 결합 : 목록 항목 사이의 줄 바꿈을 제거하고 한 줄에 삽입합니다.
• 차단 목록 태그: 목록 항목의 시작 태그와 끝 태그를 같은 줄로 이동하고 그 사이의 공백을 제거합니다.
• 글꼴 크기 재설정: 글꼴 크기 추가: 0; 목록 항목의 상위 요소에. 그러면 상속된 공백 설정이 재설정됩니다. 그런 다음 목록 항목 내 콘텐츠의 글꼴 크기를 원하는 값으로 설정합니다.

공백 설정을 재설정하는 동안 HTML의 가독성을 유지하는 마지막 방법이 선호되는 방법입니다. 글꼴 크기 설정: 0; 상위 요소에서는 공백이 효과적으로 제거되고 인라인 블록 요소의 실제 너비가 정확하게 표시됩니다.

위 내용은 인라인 블록 요소 사이에 간격이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!