使用 CSS 删除图像之间的空间

给出:

<img src="..."/>
<img src="..."/>

结果是两个图像之间只有一个空格。通常的行为似乎是将任意数量的空格、换行符和制表符显示为单个空格。我知道我能做到以下几点:

<img src="..."/><img src="..."/>

或者

<img src="..."/><!--
--><img src="..."/>

或者

<img src="..."/
><img src="..."/>

有没有办法用 CSS 去掉那个空格。

<div class="nospace">
<img src="..."/>
<img src="..."/>
</div>

html
css

159439 次浏览

小开

最佳答案

Make them display: block in your CSS.

小开

An easy way that is compatible pretty much everywhere is to set font-size: 0 on the container, provided you don't have any descendent text nodes you need to style (though it is trivial to override this where needed).

.nospace {
font-size: 0;
}

jsFiddle.

You could also change from the default display: inline into block or inline-block. Be sure to use the workarounds required for <= IE7 (and possibly ancient Firefoxes) for inline-block to work.

小开

I prefer do like this

img { float: left; }

to remove the space between images

小开

The best solution I've found for this is to contain them in a parent div, and give that div a font-size of 0.

小开

I found that the only option that worked for me was

font-size:0;

I was also using overflow and white-space: nowrap; float: left; seems to mess things up