我试图在< td>内并排放置两个图像. (也为每个img尝试了一个< td>),但在图像之间有一些空白区域,并且不明白它们来自哪里..我可以使用float解决我的问题,但我试图避免这种情况.如果有人能向我解释为什么会这样.我从其他问题中得到了一些提示,但它不起作用.
这是我的代码：
<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像素,我需要的是某种方形,图像之间没有任何空格.
解决方法
imgs是内联元素.图像之间的水平空间来自HTML中图像之间的空白.与字符
here之间有空格的原因相同.
因此,要解决此问题,请删除空格：http://jsfiddle.net/xMW7N/2/
垂直空间也是因为图像是内联元素.间隙是为g和j等字母中的下行器保留的空间.
要解决此问题,请在img：http://jsfiddle.net/xMW7N/3/上设置vertical-align：top
虽然在你的情况下(如你的问题所述),设置float：left工作正常：http://jsfiddle.net/xMW7N/4/
