HTML에서 인라인 블록 공백을 제거하는 방법

이 글에서는 HTML에서 Inline-Block을 빠르게 제거하는 5가지 방법을 주로 자세히 소개합니다. 관심 있는 친구들은 참고하시면 됩니다.

"인라인" 요소에서 여백과 패딩을 제어해야 할 때 inline- block 속성 값은 매우 유용합니다. . 이를 사용하면 더 이상 이러한 요소를 "블록" 및 "부동"으로 만들 필요가 없습니다. 그러나 인라인 블록을 사용할 때 HTML 요소 사이의 공백이 페이지에 표시된다는 문제가 있습니다. 매우 짜증나. 이러한 공백을 제거하는 방법에는 여러 가지가 있습니다. 그 중 하나는 매우 영리합니다.

방법 1: 요소 사이에 공백을 두지 마세요

이 문제에 대한 100% 해결책은 HTML 코드의 요소 사이에 공백을 두지 않는 것입니다.

<ul>   
<li>Item content</li>   
<li>Item content</li>   
<li>Item content</li>   
</ul>

물론 이것은 어색해 보입니다. 코드는 유지 관리하기 어렵지만 매우 실용적이고 매우 직관적이며 더 중요하게는... 매우 안정적입니다.

방법 2: 상위 요소에 글꼴 크기: 0을 설정

이 공백 문제에 대한 가장 좋은 해결책은 이러한 인라인 블록 요소의 상위 요소에 글꼴 크기: 0을 설정하는 것입니다. 64349c75da2f924823fe3c3e91a71ff3에 인라인 블록 8c0e9d2c5e6a7ea41578d97b4d80f7d8이 있는 경우 다음을 수행할 수 있습니다.

.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 주석으로 사용하지만 코드의 가독성에 관계없이 수동으로 공백을 제거합니다.

어떤 방법도 이상적이지 않지만 웹 페이지에 공백을 두지 않는 것도 나쁜 방법입니다. 이는 인라인 블록 사용에 대한 경고가 아닙니다. 인라인 블록은 여전히 ​​매우 유용합니다. 단지 그 안에 나타나는 공백을 처리하는 방법을 이해하면 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

html 템플릿을 사용하여 코드 분석 표현하기

위 내용은 HTML에서 인라인 블록 공백을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!