40

インライン ブロックには、ブロック間にこの奇妙なスペースがあります。AJAX 呼び出しでより多くのコンテンツをロードすると、小さなスペースがなくなるまで、私はそれと一緒に暮らすことができました。私はここで何かが欠けていることを知っています。

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0; 
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

インラインブロックで間隔を一定にする方法は?

4

5 に答える 5

23

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

<div>...</div><div>...</div>
              ^
              |--- no whitespace/new line here.

あなたのスペースは、ブラウザが表示するときに「スペース」に変換された新しい行でした。

または、CSS を使って少しハックすることもできます。

フレックスボックスは、子要素間の空白を便利に無視し、連続したインライン ブロック要素と同様に表示されます。

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

body { display: flex; flex-wrap: wrap; align-items: end; }

古い回答(フレックスボックス以前の古いブラウザにも適用されます) http://jsfiddle.net/AWMMT/6/

body { white-space: -0.125em; }
body > * { white-space: 0; /* reset to default */ }
于 2013-05-21T20:30:27.980 に答える
8

空白はコメントアウトできます。

2013年の元の回答

お気に入り：

<span>Text</span><!--

--><span>Text 2</span>

編集 2016:

また、次の要素の直前に閉じ括弧を配置する次の方法も気に入っています。

<span>Text</span

><span>Text 2</span>
于 2013-09-05T15:15:32.370 に答える
1

また、このようにすることもできます（IMHO、これはシンタティックに正しいと思います）

<div class="div1">...</div>
<div class="div1">...</div>
.
.

.div1{
    display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }
于 2014-07-02T17:53:29.507 に答える