Html <；img>；在<；表>；没有任何空间_Html_Image_Html Table

Html <；img>；在<；表>；没有任何空间

html image

Html <；img>；在<；表>；没有任何空间,html,image,html-table,Html,Image,Html Table,我试图将两个图像并排放置在一个（也尝试为每个img放置一个），但图像之间有一些空白，不知道它们来自何处。。我可以用float解决我的问题，但我正在努力避免这个问题。如果有人能向我解释为什么会这样。我从其他问题中得到了一些提示，但它不起作用这是我的密码： <html> <head> <style "text/css"> td, tr, img { padding: 0px; margin: 0px; border: none; }

我试图将两个图像并排放置在一个

（也尝试为每个img放置一个

），但图像之间有一些空白，不知道它们来自何处。。我可以用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>


td，tr，img{填充：0px；边距：0px；边框：无；}
表{边框折叠：折叠；}

您可以注意到顶部图像的高度为800 px，其他图像的高度为400 px，我需要的是某种正方形，图像之间没有空格。

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

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

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

添加

display:block到您的图像。

这将消除因图像内联而造成的任何间隙，但您可能需要将单元格拆分，使其并排放置您还可以删除空白，这样可以消除空白。如果没有表格，这更容易做到：身体{ 背景：黑色； } .imgHolder{ 宽度：800px；保证金：自动； } .imgHolder img{ 浮动：左； } img s是内联元素。图像之间的水平空间来自HTML中图像之间的空白。同样的原因是字符之间有一个空格因此，要解决这个问题，请删除空白：垂直空间也是因为图像是内联元素。间隙是为字母g 和j 中的下降者保留的空间要解决此问题，请在img 上设置vertical align:top ：尽管在您的情况下（如问题中所述），设置float:left 效果很好：这是因为float:left 强制display:block ，所以由图像内联引起的所有问题都得到了解决。 Demo:您不需要中心标记。它也被弃用了。使用margin:auto 。演示：这里的基本问题是您正在使用。这会不会只是将图像放在彼此的顶部？我想您也会希望浮动：左/右：但是，为什么要保留中心标记？好的，这解决了问题，但是，我认为这不是使用浮动的最佳方式。一定是一种不使用浮动的方法。@Felipe Silva:使用浮动没有任何问题。但是，如果您已经决定，请参阅我的答案，了解一个不涉及浮动的修复方法。@Felipe-这是一个不寻常的声明，因为您的代码包含一个中心标记和表，用于布局。我可以看到这种方法没有任何错误（除了仍在这个答案中的中心标签，在我看来应该删除它）。@Jared-我累了，它已经存在了！我将使用正确的方式进行编辑我甚至无法想象换行符被视为空白。在HTML中，所有空白（换行符、空格、制表符）在处理文本时都被视为空白。所有连续的空白被合并并呈现为单个空格字符。这就是为什么在使用文本段落时需要标记或强制换行-如果段落之间只有换行符，它们将一起运行，只有一个空格分隔。我甚至无法想象换行符被视为空白。为什么？费利佩·席尔瓦：任何“空白字符”（空格、制表符、换行符）都被压缩到一个空格中。例如：。如您所见，尽管HTML中的空白量不同，但图像之间的距离是相同的。 <!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>