web-dev-qa-db-ja.com

CSSでインライン要素間の間隔を削除するにはどうすればよいですか？

多数の画像タグを含むdivがあります。以下に例を示します。

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

タグの間に空白があるため、ブラウザは画像間に空白を表示します（Chromeは4pxを決定します）。 >と<を直接隣り合わせずに、画像間に空白を一切表示しないようにブラウザに指示するにはどうすればよいですか？ブラウザーが使用することを決定したものに加えて、文字間隔が適用されることを知っているので、負の値であっても役に立たない。基本的には、Twitterのホームページの下部にあるようなものを探しています。私は彼らのコードを見て、彼らは順不同リストを使用しています。私はそれを行うことができましたが、これらの画像の間の空白を除去する方法がないように見える理由の技術的な説明が欲しいです。

htmlcsswhitespaceremoving-whitespace
32
Jake Petroules

img {margin:0;padding:0;float:left}を追加してみてください

つまり、marginとpaddingのブラウザのデフォルトのimgとfloatを削除します。

デモ： http://jsfiddle.net/PZPbJ/

12
Sotiris

何らかの理由でそれをしたい場合：

  • floatsを使用せず、そして;
  • hTML内の空白を折りたたむことなく（これが最も簡単な解決策であり、それが価値があるために、Twitterは何をしているのか）

ここからソリューションを使用できます。

インラインブロック要素間のスペースを削除する方法？

私はそれ以来わずかに改良しました。

参照：http://jsfiddle.net/JVd7G/

letter-spacing: -1pxはSafariを修正することです。

div {
    font-size: 0;
    letter-spacing: -1px
}

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>
27
thirtydot

レイアウトをいじらず、コードの書式設定を保持する最も簡単なソリューション：

<div style="margin: 0; padding: 0; border: 0;">
       <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a><!--
    --><a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a><!--
    --><a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>
25
ThinkingStiff

間隔は、インライン要素であるため、画像を移動させます。それらを積み重ねたい場合は、順序付けられていないリストを使用できます（Twitterと同様）。これにより、各画像がブロック要素内に配置されます。

インライン要素はテキストとともにインラインで表示されます。

2
Adam Hutchinson

すべてのアンカーをfloat-leftにし、margin-leftを-1に設定することもできます

0
Cata

Apacheでページを提供している場合は、Google PageSpeed Moduleを使用できます。これには、空白を折りたたむために使用できるオプションがあります。

http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html

PageSpeedのより「危険な」オプションを使用する必要はありません。

CSSで空白を削除する方法については、この質問の回答も参照してください。

HTMLの空白を無視

0
ʍǝɥʇɐɯ

空白はセル間に影響を与えないため、テーブルを使用するのが正しい方法のようです。

0
Daniel F