이 글의 내용은 CSS에서 인라인 블록 요소 사이의 간격을 제거하는 방법에 관한 것입니다. (다양한 방법) 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.
1. 현상 설명
진정한 의미에서 인라인 블록에서 가로로 표시되는 요소는 줄 바꿈이나 공백으로 구분되어 표시될 때 간격이 발생합니다. 이는 브라우징 때문입니다. 구문 분석할 때 프로세서는 개행 문자 등을 공백으로 읽습니다.
2. 공백 제거 방법
줄 바꿈이나 요소 사이의 공백을 제거하면 공백이 자연스럽게 사라지게 되지만, 이렇게 하면 코드의 가독성이 떨어집니다. 바람직하지 않습니다.
<div> <a href=""> 链接1</a><a href=""> 链接2</a><a href=""> 链接3</a><a href=""> 链接4</a> </div> <div> <a href="">链接1</a ><a href="">链接2</a ><a href="">链接3</a ><a href="">链接4</a> </div> <div> <a href="">链接1</a><!-- --><a href="">链接2</a><!-- --><a href="">链接3</a><!-- --><a href="">链接4</a> </div>
음수 여백 값을 사용합니다. 그러나 외부의 불확실한 요인과 마지막 요소의 추가 음수 여백 값 문제로 인해 이 방법은 권장되지 않습니다.
<style> a { background: pink; display: inline-block; padding: .5em 1em; margin: -3px; } </style> <body> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div> </body>
3 글꼴 크기:0을 상위 요소로 설정한 다음 하위 요소에서 글꼴 크기를 설정하면 요소 사이의 간격도 제거할 수 있습니다.
<style> div{ font-size: 0; } a{ font-size: 16px; background: pink; } </style> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div>
IV 닫는 태그를 삭제하세요.
<div> <a href="">链接1 <a href="">链接2 <a href="">链接3 <a href="">链接4 </div>
⑤ 문자 간격을 사용하세요.
<style> div{ letter-spacing: -6px; } a{ letter-spacing: 0; background: pink; } </style> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div>
⑥ 단어 간격을 사용하세요.
<style> div{ word-spacing: -6px; } a{ word-spacing: 0; background: pink; } </style> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div>
【관련 권장사항: CSS 동영상 튜토리얼】
위 내용은 CSS에서 인라인 블록 요소 사이의 간격을 제거하는 방법은 무엇입니까? (다양한 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!