displayの除去:inline-block要素間の間隔

3661 ワード

display:inline-block後の要素間の間隔
発生原因:改行または復帰によるもの.
解決方法:
方法1:htmlのスペースまたはラベルを除去します.     

または、
span span span span

またはHTMLコメントを使用します.

なお、IE 6/IE 7などのブラウザに下向きに対応するため、最後のリストのラベルの終了(閉じる)ラベルをなくすことはできません.
HTML 5では、私たちは直接:

最も直接的だが、最も望ましくない.制御不能な要素は:前後端協同;バージョンの変更他の人が引き継ぐ.自分のコード習慣などなど.
方法2:font-size:0を使用する
次のようなコードがあります.
.space {
    font-size: 0;
    -webkit-text-size-adjust:none;//Chrome           .  ,      ,       
}
.space a {
    font-size: 12px;
}

補足:Chromeブラウザでは、最小フォント制限がキャンセルされているということです.したがって、上記の-webkit-text-size-adjust:none;コードの推定時間は多くありません.
方法3:margin負の値を使用します.
.space a {
    display: inline-block;
    margin-right: -3px;
}
12ピクセルサイズのコンテキストに対して、Arialフォントのmargin負の値は-3ピクセル、TahomaとVerdanaは-4ピクセル、Genevaは-6ピクセル.
この方法は,外部環境の不確実性や,最後の要素が多く出る親margin値などの問題により,大規模な使用には適していない.
方法4:letter-spacingを使用する
次のようなコードがあります.
.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

私の去年のテストによると、この方法は基本的にすべてのブラウザを解決することができて、IE 6/IE 7を含めて、しかしOperaブラウザの下で問題があります:最小間隔の1画素、それから、letter-spacingは更に小さく復元しました.
方法5:word-spacingを使用する
次のようなコードがあります.
.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

1つは文字間隔(letter-spacing)であり、1つは単語間隔(word-spacing)であり、大同小異である.私のテストによると、word-spacingの負の値はある程度大きくさえあれば、その互換性の違いは無視できます.なぜなら、word-spacingは負の値が大きくても重複しないようだからだ.
上のdemoと同じ効果で、ここではスクリーンショットを展示しません.Chromeブラウザを使用すると、間隔が依然として存在する可能性があります.確かにこの問題があるのは、原因は分かりませんが、display: table;display:inline-table;を追加してChromeブラウザも賢くなることができることを知っています.
.space {
    display: inline-table;
    word-spacing: -6px;
}

方法6:floatを用いる.(推奨)
次のようなコードがあります.