インライン要素間の改行によって生じる空白の処理_html/css_WEB-ITnose

インターネットからの画像

インライン、インラインブロック要素間の改行により、スペースのような空白が発生します。遭遇したかどうかはわかりませんが？たとえば、次のコード:

<a>1</a><a>2</a>

この種の問題はレイアウトにほとんど影響を与えず、簡単に無視されます。しかし、特定の極端な状況では、この問題がさらに拡大する可能性があります。たとえば、次のコードは次のとおりです。

<ul>  <li>Item content</li>  <li>Item content</li>  <li>Item content</li></ul><style>li{  width:33.3%;  display:inline-block;  background:#abc; }</style>

このような行構造では、インライン要素の幅が正確に割り当てられ、改行によって生じる空白の影響が増幅されます。この問題を解決するにはどうすればよいでしょうか?

1. インライン ブロックの代わりにフローティング ブロックを選択する IE6 のインライン ブロックとの互換性に対処しなければならなかったので、インライン ブロックを適用しない習慣が身についたので、私が最初に考えました。この解決策。
2. 次のコードのようなエンコード時に改行を使用しないでください。

   <ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

   この方法では問題は解決されませんが、回避されます。これは影響のない最も単純な方法ですが、後で他の人がコードをフォーマットしやすく、明らかにこの方法の保守性は低すぎます。
3. 親のフォント サイズを 0 に設定し、インライン要素のフォント サイズを復元します。この方法が私のお気に入りです。「高尚」に見えるからではなく、問題の原因となる原理が明らかになるからです。
4. 次のコードのように、コード レイアウトにコメントを使用します。

   <ul>   <li>Item content</li><!----><li>Item content</li><!----><li>Item content</li></ul>

5. 前のメソッドと同様にリターン タグを使用します。コードは次のとおりです。

   <ul> <li>Item content</li  ><li>Item content</li ><li>Item content</li></ul>

6. 次のコードのような CSS 否定マージンを使用します。

   .inline-block-list li { margin-left: -4px;}

   この方法は最悪です。問題を解決するために新たな問題が発生するリスクが高まる可能性があり、一方で堅牢性と保守性が低下します。これらのソリューションはテスト済みであり、1 番目と 3 番目のソリューションが推奨されます。

---

この記事は、Segmentfault によるインラインブロック要素間の空白の削除に関する記事を参照しています。