31

私は 3 つの div を水平方向に並べて並べて配置しており、これらの div は表示するように設定されています: inline-block. しかし、ある種の CSS リセットを使用しても、互いの間にわずか 4px の距離が生じることに気付きました。なぜこれが起こるのですか？これをグローバルに回避する方法はありますか、それとも div を左 -4px にシフトするだけですか?

4

5 に答える 5

68

これは、ブラウザがDIVをインラインでレンダリングし、単語と同様に、スペースで区切られていることが原因です。

スペースの幅はfont-sizeによって決定されるため、簡単なトリックは、含む要素のfont-sizeを0に設定してから、インラインdivのfont-sizeをリセットすることです。

#container { font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

私はこのフィドルでこれを示しました。

詳細については、この記事をご覧ください。

于 2013-01-09T16:30:53.130 に答える
14

これは、各終了タグの後に改行文字があるためであると想定します。これらは、HTMLではスペースとして処理されます。それらを削除してみてください。ここにいくつかのデモがあります：

http://jsfiddle.net/eeRFC/-スペース付き

<div>test</div>
<div>test</div>
<div>test</div>

http://jsfiddle.net/eeRFC/1/-スペースなし

<div>test
</div><div>test
</div><div>test
</div>

そして一般的なCSS：

div {
  border:solid 1px black;
  display:inline-block;
}
于 2013-01-09T16:30:11.633 に答える
8

前のdivの終わりと次のdivの始まりの間の新しい行を削除します。たとえば、次のように置き換えます。

<div id="div1">
 Div Item 1
</div>
<div id="div2">
 Div Item 2
</div>

と

<div id="div1">
 Div Item 1
</div><div id="div2">
 Div Item 2
</div>
于 2013-01-09T16:31:05.277 に答える
5

またはのいずれfloat:leftかを使用すると機能しdisplay:inline-blockます。こちらの作業例のリンクを参照してください。

于 2013-01-09T16:37:27.910 に答える
2

HTML の div の間に改行がある可能性が高いですよね? div 間にセパレータがある場合、ブラウザーはそれらの間にスペースを表示します。

次の例では、div 間にスペースがあります。

<style>
* {
    margin: 0;
    border: 1px solid black;
}

div {
    display: inline-block;
}
</style>

<div>
Div1
</div>

<div>
Div2
</div>

<div>
Div3
</div>

div 間のスペースを削除するために使用できる方法は 2 つあります。次のように div 要素間のセパレーターを削除します。

<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>

または、div を浮動要素にします。

...
div {
    display: inline-block;
    float: left;
}
...

それが役立つことを願っています!

編集:
関連するSOの質問も参照してください: HTMLのリスト項目間に新しい行がスペースを追加するのを止めるにはどうすればよいですか?

于 2013-01-09T16:42:35.973 に答える