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中图像之间的空白。与here字符之间存在空格的原因相同。

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

垂直空间也是因为图像是内联元素。差距是为g和j等字母中的下行者保留的空间。

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

虽然在您的情况下（如您的问题所述），设置float: left的工作正常：http://jsfiddle.net/xMW7N/4/

这是有效的，因为float: left强制display: block，因此图像内联导致的所有问题都得到了解决。

Answer 4

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

Answer 5

将display: block;添加到您的图片中。

这将消除图像内嵌造成的任何间隙，但您可能需要将单元格分开以允许它们并排放置。

您还可以删除应该删除空格的空格。

<img/>没有任何空格<table> </table>

5 个答案: