如何消除CSS中的内联元素之间的间距？

问题描述：

我有一个div，里面有一堆图片标签，下面是一个例子：

I have a div with a bunch of image tags inside, here is an example:

<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 ）。如何告诉浏览器在图像之间不显示任何空白，而不放置>和

Because there is whitespace between the tags, browsers will display some whitespace between the images (Chrome decides on 4px). How can I tell the browser to show NO whitespace whatsoever between the images, without placing the > and < directly next to each other? I know letter-spacing applies in addition to what the browser decides to use, so that's useless even with a negative value. Basically I'm going for something like Twitter has at the bottom of their home page. I looked at their code and they're using an unordered list. I could just do that but I'd like the technical explanation for why there appears to be no way to eliminate the white space from between these images.

答

尝试添加 img {margin：0; padding：0; float：left}

换句话说，删除 img $ c>的任何默认 margin 和 padding $ c>和 float 。

in other words remove any default margin and padding of browsers for img and float them.

演示： http://jsfiddle.net/PZPbJ/

如何消除CSS中的内联元素之间的间距？

相关推荐