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

すごいです

この状況は通常、メソッド 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 シリーズの一部の下位バージョンでは無効になる可能性があります (インラインブロックは機能しません)。著者: ヤン・ルイタオ