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

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

不言

풀어 주다： 2019-04-04 11:56:23

앞으로

2976명이 탐색했습니다.

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