「white-space: nowrap」を使用してインラインブロック要素間の予期しないギャップを除去するにはどうすればよいですか?

空白を使用するゼロ空白の解決策: nowrap?

空白を nowrap に設定したインライン ブロックは、効果的に実行できます。ブラウザの幅いっぱいにします。ただし、要素間に説明のつかないギャップがあるように見える場合、不一致が発生します。このギャップは、パディング、マージン、ボーダー、またはオフセットによって引き起こされるものではありません。

ギャップの原因

ギャップは、行形式の空白文字に起因します。インラインブロック要素間の改行とタブ。

解決策: 白をコメントアウトするSpace

解決策の 1 つは、空白文字をコメント アウトして削除することです。これは次のように実行できます:

<div>

スペースを削除する代替方法

空白をコメントアウトする以外に、他のいくつかの方法を使用してギャップを削除できます。 :

• 不要なタグを削除して HTML を最小化し、属性
• 隣接する要素に負のマージンを使用する
• 終了タグを分割してその前後の空白を削除する
• 親要素のフォント サイズをゼロに調整し、子要素に対してリセットするelements
• インライン要素を使用する代わりにフローティングします。 inline-block
• フレックスボックスの実装

以上が「white-space: nowrap」を使用してインラインブロック要素間の予期しないギャップを除去するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。