"인라인" 요소에서 여백과 패딩을 제어해야 하는 경우 inline-block 속성 값이 매우 유용해집니다. 이를 사용하면 더 이상 이러한 요소를 "블록" 및 "부동"으로 만들 필요가 없습니다. 그러나 인라인 블록을 사용할 때 HTML 요소 사이의 공백이 페이지에 표시된다는 문제가 있습니다. 매우 짜증나. 이러한 공백을 제거하는 방법에는 여러 가지가 있습니다. 그 중 하나는 매우 영리합니다.
방법 1: 요소 사이에 공백을 두지 않습니다.
이 문제에 대한 100% 해결책은 HTML 코드의 요소 사이에 공백을 두지 않는 것입니다:
<ul> <li>Item content</li> <li>Item content</li> <li>Item content</li> </ul>
물론 지저분해 보이고 코드 유지 관리가 어려워지지만 매우 실용적이고 매우 직관적이며 무엇보다... 매우 안정적입니다.
방법 2: 상위 요소에 글꼴 크기: 0 설정
이 공백 문제에 대한 가장 좋은 해결책은 이러한 인라인 블록의 상위 요소에 글꼴 크기: 0을 설정하는 것입니다. 요소.
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}상위 요소의 글꼴 크기가 영향을 받지 않도록 합니다. 하위 요소의 경우 일반적으로 간단하게 하위 요소의 글꼴 크기 값을 다시 설정해야 합니다. 문제가 발생할 수 있는 유일한 경우는 글꼴을 상대적 크기로 설정하는 경우입니다. 하지만 대부분의 경우 이 방법으로 문제가 해결됩니다.
방법 3: HTML 주석
이 방법은 약간 폭력적이지만 여전히 작동할 수 있습니다. HTML 요소 사이의 공백을 주석으로 채우는 것은 마치 공백이 없는 것과 같은 효과를 냅니다.
<ul> <li>Item content</li><!-- --><li>Item content</li><!-- --><li>Item content</li> </ul>
한마디로...역겹습니다. 두 단어로 말하면...매우 역겹습니다. 세 단어로….알겠습니다. 하지만 작동합니다!
방법 4: 음수 여백
방법 2와 매우 유사합니다. 죄송합니다. 인라인 블록의 유연성을 활용하고 공백을 숨기기 위해 음수 여백을 제공할 수 있습니다.
.inline-block-list li {
margin-left: -4px;
}이 방법은 다양한 상황을 고려해야 하기 때문에 가장 권장되지 않습니다. 예상치 못한 공백이 있습니다. 이 트릭을 사용하지 않는 것이 가장 좋습니다.
방법 5: 머리부터 꼬리까지
HTML 태그를 사용하는 또 다른 방법은 요소의 닫는 태그와 다음 요소의 여는 태그를 서로 가깝게 배치하는 것입니다.
<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li> </ul>
HTML 주석만큼 보기 흉하지는 않지만 코드 가독성에 관계없이 공백을 직접 제거하고 싶습니다.
어떤 방법도 이상적인 방법은 아니지만 페이지에 공백을 두지 않는 것도 나쁜 방법입니다. 이는 인라인 블록 사용에 대한 경고가 아닙니다. 인라인 블록은 여전히 매우 유용하지만 여기에 나타나는 공백을 처리하는 방법을 이해하면 됩니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.
HTML에서 Inline-Block의 공백을 빠르게 제거하는 5가지 방법에 대한 자세한 내용은 PHP 중국어 웹사이트에서 관련 기사를 참고하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
