32

たくさんの画像タグが入った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のホームページの下部にあるようなものを探しています。私は彼らのコードを調べました、そして彼らは順序付けられていないリストを使用しています。それはできますが、これらの画像の間の空白をなくす方法がないように見える理由について、技術的な説明が必要です。

4

8 に答える 8

27

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

  • sを使用せずfloatに、および;
  • HTML の空白を折りたたむことなく (これが最も簡単な解決策であり、Twitter が行っていることの価値があります)

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

インラインブロック要素間のスペースを削除するには?

それ以来、少し洗練されています。

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

letter-spacing: -1pxSafariを修正することです。

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>
于 2011-06-02T11:14:37.513 に答える
25

レイアウトをいじらず、コードのフォーマットを保持する最も簡単なソリューション:

<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>
于 2013-01-29T02:28:59.577 に答える
14

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

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

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

于 2011-06-02T10:39:54.833 に答える
2

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

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

于 2011-06-02T10:35:59.923 に答える
0

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

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

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

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

HTML の空白を無視する

于 2011-06-02T10:42:31.120 に答える
0

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

于 2011-06-02T10:40:01.527 に答える
0

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

于 2013-05-22T14:06:24.233 に答える
-3

タグに追加style="display:block"します。img

于 2013-09-04T03:25:13.893 に答える