行レベル要素とブロックレベル要素の間のスペースを削除する (翻訳)_html/css_WEB-ITnose

はじめに

IE6 時代のジュニア開発者として、IE に display: inline-block; 属性があることを切望していたことを今でも覚えています。 inline-block 属性は、block や float を使用せずにインライン要素のスペースとパディングを制御したい場合に非常に便利です。
ただし、inline-block を使用すると問題が発生します。2 つの要素の間に視覚的なギャップが生じます。
これらの迷惑な空白を削除する方法はたくさんあります

方法 0

この問題に対する唯一の 100% 解決策は、これらの要素のソース コードの間に空白を入れないことです。

すごいです

その効果は次のとおりです:

もちろん、これは保守がより面倒ですが、非常に実用的で論理的で、そして最も重要なことに、比較的信頼性が高いです。

方法 1

最適な空白の解決策: 行ブロック要素の親要素を font-size: 0 に設定します。したがって、

要素が多数の

要素でラップされている場合は、これを行うことができます。

すごいです

この状況は通常、メソッド 0 と同じ結果になります。 ただし、IE8 では、position:absolute が line および block レベルの要素に設定されている場合、これは深刻な問題を引き起こし、ページが直接すべて空白。

方法 2

この方法は少し難しいですが、それでも使用できます。行ブロック要素の間に HTML コメントを使用することも原則です

<style type="text/css">ul,li{  margin: 0;  padding: 0;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;}</style><ul><li>Item</li><li>Item</li><li>Item</li></ul>

これを説明するには 1 つの単語を使用してください。 。 。まったく、この方法を表す言葉は 2 つあります。 。 。本当にひどい。 3 つの単語を使用します。 。 。それだけです - わかります。彼は正常に表示できます。

方法3

方法2と同様に、この方法も少し残念です。ラインブロック要素の柔軟性を利用して、負のスペースを使用して空白をオフセットすることができます

<style type="text/css">ul,li{  margin: 0;  padding: 0;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;}.inline-block-list{  font-size: 0;}.inline-block-list li{  font-size: 14px;}</style><ul class="inline-block-list">  <li>Item</li>  <li>Item</li>  <li>Item</li></ul>

これは不適切な解決策です。負のスペースを計算する必要があり、場合によっては予測できない空白が発生することがあります。したがって、ラインブロック要素間のギャップを解決するためにこれを使用することは避けてください。

方法 4

もう 1 つの HTML ベースのハック ソリューションは、次のタグの先頭に終了タグ > を置くことです。なぜ空白が存在するのかを考えずに空白を削除してください。

これらの解決策はどれも完璧ではなく、唯一の選択肢は HTML でスペースやインデントを使用しないことですが、これも良い解決策ではありません。 inline-block は依然として非常に便利であるため、これは「何を使用するかに注意する」というアプローチではありませんが、開発者がそれを使用するときに空白を処理する方法を知っておくことが重要です。

メソッド my

私のメソッドは float を使用するものですが、IE7 でも問題ありません。以前のメソッドは、IE シリーズの一部の下位バージョンでは無効になる可能性があります (インラインブロックは機能しません)。著者: ヤン・ルイタオ

メール: ritoyan@163.com