インライン ブロック: 空間特性の探索

Question

インラインブロック間に奇妙な隙間があります。 AJAX 呼び出しでさらに多くのコンテンツをロードし、この小さなギャップがなくなるまでは、このままで大丈夫です。ここで何かが足りないことはわかっています。

div {
    幅: 100ピクセル;
    高さ: 自動;
    境界線: 1 ピクセルの赤一色。
    アウトライン: 1 ピクセルの青一色。
    マージン: 0;
    パディング: 0;
    表示: インラインブロック;
}

http://jsfiddle.net/AWMMT/

インラインブロック間の間隔を一定にするにはどうすればよいですか?

Answer 1

http://jsfiddle.net/AWMMT/1/

リーリー

スペースは改行であり、表示時にブラウザによって「スペース」に変換されます。

または、CSS を使用していくつかの小さな調整を試みることもできます:

フレックスボックスは、子要素間のスペースを都合よく無視し、連続したインラインブロック要素のように表示されます。

http://jsfiddle.net/AWMMT/470/

リーリー

Answer 2

HTML 内のスペース。考えられる解決策はいくつかあります。最高から最悪の順:

1. HTML 内の実際の空白を削除します (ファイルを提供するときにサーバーがこれを行うことができるか、少なくとも入力テンプレートが空白を適切に追加できることが理想です) http://jsfiddle.net/AWMMT/2/
2. display: inline-block の代わりに float: left を使用しますが、これは高さに悪影響を及ぼします: http://jsfiddle.net/AWMMT /3 /
3. コンテナの font-size を 0 に設定し、内部要素に適切な font-size を設定します: http://jsfiddle.net/AWMMT/4 / - これは非常に単純ですが、内部要素の相対フォント サイズ ルール (パーセンテージ、em) を利用することはできません