CSS のインラインブロック要素間のスペースを削除するにはどうすればよいですか? (複数の方法)-CSSチュートリアル-php.cn

CSS のインラインブロック要素間のスペースを削除するにはどうすればよいですか? (複数の方法)

不言

リリース： 2019-04-04 11:56:23

転載

2971 人が閲覧しました

この記事の内容は、CSS の inline-block 要素間のスペースを削除する方法についてです。（複数の方法）、一定の参考値があり、困っている友人は参考にしていただければ幸いです。

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>

ログイン後にコピー

③ 親要素に font-size: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>

ログイン後にコピー

④ 終了タグを削除します。

<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 中国語 Web サイトの他の関連記事を参照してください。