인라인 블록 요소 사이의 기본 간격을 제거하는 방법

며칠 전에 글을 썼습니다

div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
    <li></li>

　　<li></li>

　　<li></li>

</ul>

너비가 900px인 div는 너비가 300px인 인라인 요소 li 3개를 넣을 수 없으므로 레이아웃에 float:left를 사용해야 했습니다. 나중에 온라인으로 확인해 보니 inline-block에는 기본 간격이 있고 기본 간격은 4px이고 inline에도 기본 간격이 있다는 것을 알게 되었습니다. 이제 인라인 블록 요소와 인라인 요소 사이의 간격을 해결하는 몇 가지 방법을 살펴보겠습니다.

1. html로 한 줄에 요소를 직접 쓰거나, 한두 줄에 닫는 태그와 두 번째 여는 태그를 쓸 수도 있고, 닫는 태그를 직접 삭제할 수도 있지만, 마지막 태그는 지울 수 없습니다.

2. margin-right를 음수 값으로 설정하되 컨텍스트 글꼴과 텍스트 크기를 고려하세요.

3. 먼저 하위 요소의 글꼴을 설정한 다음 상위 요소를 설정합니다.
4, 상위 요소의 문자 간격이나 단어 간격을 음수 값으로 설정하고, 글꼴을 고려하고, 하위 요소에 텍스트가 있는 경우 문자 간격이나 단어 간격 값 설정에도 주의하세요.

5.float:왼쪽;