'margin: 0'을 사용해도 내 인라인 차단 목록 항목에 원치 않는 여백이 있는 이유는 무엇입니까?

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

문제

표시되도록 설정된 목록 항목이 인라인되는 문제가 발생했습니다. 여백에 대한 CSS 규칙이 다음으로 설정되어 있음에도 불구하고 블록 주변에 원하지 않는 여백이 있습니다. 0.

HTML:

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

CSS:

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;
}

해결 방법

이 문제는 display: inline-block 속성으로 인해 발생합니다. 다음은 두 가지 해결 방법입니다.

1. 디스플레이 변경: 인라인 블록을 부동 소수점으로 변경: 왼쪽:

   • CSS:

     li {
       float: left;
     }

2. 목록 사이의 공백 제거 항목:

   • 태그를 차단하고 종료 태그와 시작 태그를 함께 차단합니다.

     • HTML:

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

참고:

inline-block은 4px 여백을 렌더링합니다. 각 요소의 오른쪽. 이를 방지하려면 float를 사용하거나 목록 항목 사이에 공백을 사용하지 않는 것이 좋습니다.

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