< IMG>在< table>中没有任何空格 [英] <img> in <table> without any spaces
问题描述
我试图将两张图片并排放在< td> 内（还试过一张< td> 对于每个img），但在图像之间有一些空白区域，并且不明白它们来自哪里..我可以使用float解决我的问题，但我试图避免这种情况。如果有人能向我解释为什么会这样。我从其他问题中得到了一些提示，但它不起作用。
I am trying to put two images side by side inside a <td> (also tried one <td> for each img), but has some white spaces between the images, and do not understand where they come .. I can solve my problem using float, but I'm trying to avoid this. If someone can explain to me why this happens. I took some tips from other questions, but it doesn't work.
这是我的代码：
<html>
<head>
<style "text/css">
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse;}
</style>
</head>
<body style="background: black;">
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
<img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
</td>
</tr>
</table>
</center>
</body>
你可以注意到顶部图像有800像素的高度，其他的每个有400像素，我需要的是某种方形，图像之间没有任何空格。
you can notice that the top image has 800 px height, and the other ones has 400px each one, what I need is some kinda square, without any spaces between the images.
推荐答案
img s是内联元素。图像之间的水平空间来自HTML中图像之间的空白。字符此处之间存在空格的原因相同。
imgs are inline elements. The horizontal space between the images is coming from the whitespace between the images in the HTML. The same reason that there's a space between the characters here.
所以，要解决这个问题，请删除空格： http://jsfiddle.net/xMW7N/2/
So, to fix that, remove the whitespace: http://jsfiddle.net/xMW7N/2/
垂直空间也是因为图像是内联元素。差距是为下划线保留的空间，如 g 和 j 。
The vertical space is also because the images are inline elements. The gap is the space reserved for descenders in letters like g and j.
要解决此问题，请在 img 上设置 vertical-align：top ： http://jsfiddle.net/xMW7N/3/
To fix that, set vertical-align: top on img: http://jsfiddle.net/xMW7N/3/
虽然在你的情况下（如你的问题所述），设置 float：left 可以正常工作： http://jsfiddle.net/xMW7N/4/
Although in your case (as mentioned in your question), setting float: left works just fine: http://jsfiddle.net/xMW7N/4/
这是因为 float：left 强制显示：阻止，因此解决了内联图像导致的所有问题。
That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.
这篇关于< IMG>在< table>中没有任何空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
