displayの除去:inline-block要素間の間隔
3661 ワード
display:inline-block後の要素間の間隔
発生原因:改行または復帰によるもの.
解決方法:
方法1:htmlのスペースまたはラベルを除去します.
または、
またはHTMLコメントを使用します.
なお、IE 6/IE 7などのブラウザに下向きに対応するため、最後のリストのラベルの終了(閉じる)ラベルをなくすことはできません.
HTML 5では、私たちは直接:
最も直接的だが、最も望ましくない.制御不能な要素は:前後端協同;バージョンの変更他の人が引き継ぐ.自分のコード習慣などなど.
方法2:font-size:0を使用する
次のようなコードがあります.
補足:Chromeブラウザでは、最小フォント制限がキャンセルされているということです.したがって、上記の
方法3:margin負の値を使用します.
この方法は,外部環境の不確実性や,最後の要素が多く出る親margin値などの問題により,大規模な使用には適していない.
方法4:letter-spacingを使用する
次のようなコードがあります.
私の去年のテストによると、この方法は基本的にすべてのブラウザを解決することができて、IE 6/IE 7を含めて、しかしOperaブラウザの下で問題があります:最小間隔の1画素、それから、
方法5:word-spacingを使用する
次のようなコードがあります.
1つは文字間隔(
上のdemoと同じ効果で、ここではスクリーンショットを展示しません.Chromeブラウザを使用すると、間隔が依然として存在する可能性があります.確かにこの問題があるのは、原因は分かりませんが、
方法6:floatを用いる.(推奨)
次のようなコードがあります.
発生原因:改行または復帰によるもの.
解決方法:
方法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を用いる.(推奨)
次のようなコードがあります.