<img> 在 <table> 没有空格

Question

我试图将两个图像并排放置在<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像素，我需要的是一个正方形，图片之间没有任何间距。

Answer 1

它是标记本身中的空白。 如果删除换行符和两个图像之间的空格，该空格将消失。

空格被视为文本，作为单个空格字符。

Answer 2

不使用表就可以轻松完成此操作： http : //jsfiddle.net/feSxA/

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body {
        background: black;
    }
    .imgHolder { 
        width: 800px;
        margin: auto;
    }
    .imgHolder img {
        float: left;
    }
    </style>
</head>
<body>
    <div class="imgHolder">
        <img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
        <img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
        <img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
    </div>
</body>
</html>

Answer 3

img是内联元素。 图像之间的水平空间来自HTML中图像之间的空白。 同样的原因，还有人物之间的空间在这里 。

因此，要解决此问题，请删除空格： http : //jsfiddle.net/xMW7N/2/

垂直空间也是因为图像是嵌入式元素。 间隙是为g和j类的字母保留给后裔的空间。

要解决此问题，请在img上设置vertical-align: top ： http : //jsfiddle.net/xMW7N/3/

尽管就您而言（如您的问题所述），设置float: left效果很好： http : //jsfiddle.net/xMW7N/4/

之所以float: left是因为float: left力display: block ，所以解决了所有由内联图像引起的问题。

Answer 4

尝试在表格元素中添加border =“ 0”

Answer 5

添加display: block; 您的图像。

这样可以消除由于内嵌图像而引起的任何缝隙，但是您可能需要将单元格分开以使其并排放置。

您也可以删除应该摆脱空白的空白。