ホームページ > 記事 > ウェブフロントエンド > CSS のインラインブロック要素間のスペースを削除するにはどうすればよいですか? (複数の方法)
CSS のインラインブロック要素間のスペースを削除するにはどうすればよいですか? (複数の方法)
- 不言転載
- 2019-04-04 11:56:232915ブラウズ
この記事の内容は、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 サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：div+cssとは何ですか？次の記事：div+cssとは何ですか？