<img>在<表格>没有任何空格 [英] <img> in <table> without any spaces
问题描述
我试图将两个图像并排放置在 <td>(也为每个 img 尝试了一个 <td>)，但有一些白色图像之间的空格，并且不明白它们来自哪里......我可以使用浮动解决我的问题，但我试图避免这种情况.如果有人可以向我解释为什么会发生这种情况.我从其他问题中获取了一些提示，但它不起作用.
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 是内联元素.图像之间的水平空间来自 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 强制display:block，所以可以解决所有由内联图像引起的问题.
That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.
这篇关于<img>在<表格>没有任何空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
