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

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

목록 내에 인라인 블록 요소를 표시할 때 항목 주위에 원하지 않는 여백이 발생할 수 있습니다. 명시적으로 여백을 0으로 설정했음에도 불구하고 요소에는 여전히 간격이 표시됩니다.

이 문제는 인라인 블록 요소의 특성으로 인해 발생합니다. 인라인 블록 요소는 요소 사이와 주변의 공백 문자를 포함하여 공백 문자를 유지합니다. 이로 인해 각 요소의 오른쪽에 4px 여백이 생깁니다.

해결책

원치 않는 여백을 제거하기 위해 사용자에게는 두 가지 옵션이 있습니다.

1. 디스플레이 변경 속성:

   표시 속성을 인라인 블록에서 부동: 왼쪽으로 변환합니다. 이 방법은 공백 관련 여백을 제거합니다.

2. 요소 태그 연결:

   목록 항목의 종료 태그와 시작 태그를 함께 차단합니다. . 이 접근 방식은 여백을 유발하는 공백 문자를 제거합니다.

예

다음 HTML 및 CSS를 고려하세요.

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

ul {
  padding: 0;
  border: solid 1px #000;
}
li {
  display: inline-block;
  padding: 10px;
  width: 114px;
  border: solid 1px #f00;
  margin: 0;
}

li div {
  background-color: #000;
  width: 114px;
  height: 114px;
  color: #fff;
  font-size: 18px;
}

표시 속성을 float: left로 변경하면 원하지 않는 여백이 제거됨:

li {
  display: float: left;
  ...
}

또는 태그를 연결하면 공백 문자가 제거됩니다.

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

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