CSS에서 인라인 블록 요소 사이의 간격을 제거하는 방법은 무엇입니까? (다양한 방법)

不言
풀어 주다: 2019-04-04 11:56:23
앞으로
2960명이 탐색했습니다.

이 글의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿