HTML_html/css_WEB-ITnose の Inline-Block 要素間の空白を削除する 5 つの方法

HTML の Inline-Block 要素間の空白を削除する 5 つの方法

私は若い頃、IE6 が display: inline-block 関数をサポートできることを切望して IE6 で開発したことを覚えています。
inline-block 属性値は、「インライン」要素のマージンとパディングを制御する必要がある場合に非常に役立ちます。
これらの要素を「ブロック」および「フロート」にする必要はありません。しかし問題があり、inline-block を使用すると、
HTML 要素間の空白がページ上に表示されてしまいます。とてもうるさい。これらの空白を削除する方法はいくつかありますが、そのうちの 1 つは非常に賢いものです。
方法 0: 要素間に空白を残さない

この問題の 100% の解決策は、HTML コードの要素間に空白を残さないことです:

• Item content
• アイテムのコンテンツ

もちろん、これは見た目が乱雑でコードの保守が難しくなりますが、非常に実用的で直感的であり、さらに重要なことです。 ..非常に信頼性が高いです。
方法 1: 親要素に font-size: 0 を設定する

この空白の問題に対する最善の解決策は、これらの inline-block 要素の親要素に font-size: 0 を設定することです。

に inline-block
• がある場合は、次のようにすることができます:
  .inline-block-list { /* ul または ol with this class */
  font-size: 0; }
  
  .inline-block-list li {
  font-size: 14px; /* font-size を元に戻す */
  }
  
  親要素のフォント サイズが子要素に影響しないようにするには、要素の font-size 値を再設定する必要がありますが、これは通常は簡単です。

  問題が発生する可能性がある唯一のケースは、相対的なサイズでフォントを設定した場合です。しかし、ほとんどの場合、この方法で問題は解決します。
  方法 2: HTML コメント
  

  この方法は少し乱暴ですが、それでも機能します。 HTML 要素間のスペースをコメントで埋めます。これは、要素間に空白が存在しない場合と同じ効果があります。
  
  
  • Item content
  • アイテム内容
  • アイテム内容
  
  
  
  
  一言で言えば…気持ち悪い。一言で言えば...とても嫌だ。 3 つの言葉で言うと…わかりました。しかし、それはうまくいきます！

  方法 3: マイナスのマージン
  

  方法 2 と非常に似ていますが、申し訳ありません。インラインブロックの柔軟性を利用して、空白を隠すために負のマージンを与えることができます:

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

  この方法は、次の理由から最もお勧めできません。さまざまな状況を考慮する必要があり、場合によっては予期せぬギャップが発生することがあります。この裏技は使わないほうがいいでしょう。

  方法 4: 先頭と末尾を接続する
  HTML タグを使用する別の方法は、要素の終了タグと次の要素の開始タグを一緒に配置することです:

  • Item content< ;/li
    >
  • アイテムのコンテンツ >
  • アイテムのコンテンツ
  
  
  
  
  はHTMLコメントほど醜くはありませんが、削除したいと思いますこれらの空白は、コードの読みやすさに関係なく手動で削除されます。

  理想的な方法はありませんが、Web ページに空白を残さないのも悪い方法です。

  これは、inline-block を使用しないように警告するものではありません。inline-block は依然として非常に便利です。inline-block 内に表示される空白の処理方法を理解する必要があるだけです。