Question

<html>
 <head>
  <meta name="viewport" content="width=device-width"/>
  <title>HAHAHA</title>
  <STYLE TYPE="text/css" media="screen">
  *
  {
   padding: 0;
    margin: 0;
  }
   body
   {
    padding: 0;
    margin: 0;
   }
   #flexbox
   {
    //display: -webkit-box;
    //-webkit-box-orient: horizontal;
    //-webkit-box-align: stretch;
    //width: auto;
   }
  </STYLE>
 </head>
 <BODY style="padding:0;margin:0;border:0;">
  <!--<div id="flexbox">
   <img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
   <img src="1.jpg" width="100px"/>
   <img src="1.jpg" width="100px"/>
  </div>-->
  <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
   <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
 </BODY>
</html>

为什么这些图像之间总是有一个小空间，即使我有填充＆amp;在主体和页面中的所有其他元素上设置为0？

好的，这是完整的未经编辑的代码。

编辑：刚刚发现两个IMG之间的换行符。所以......我不能在两个元素之间输入？大声笑...... :)

Answer 1

我不能按两个元素之间的输入？大声笑...... :)

在HTML的大多数部分中，没有什么区别于一种类型的空白区域。

但是，您可以格式化代码：

<img src="..." alt="..."
><img src="..." alt="...">

...删除元素之间的空格。

Answer 2

默认情况下会显示inline图片，这可能是您的问题。 HTML中的空格字符是精简的，但如果HTML元素之间存在空格，它们仍将显示为空格。

以下HTML将呈现图像之间的微小空间。

<div class="images">
    <img src="http://placehold.it/400x300" />
    <img src="http://placehold.it/400x300" />
</div>

如果你想让它们相互冲洗，你可以尝试浮动图像：

img {
  float: left;
}

如果你是CSS的新手，那么浮动会带来自己的问题。

另一种方法是调整标记以消除额外的空白字符。执行此操作的常用方法称为“fishy”语法：

<div class="images"
    ><img src="http://placehold.it/400x300"
    /><img src="http://placehold.it/400x300"
/></div>

它的工作方式是每个元素的结束>字符移动到开始<字符之前，这样任何HTML元素中都没有空格作为内容。相反，缩进的空格是在HTML标记内，完全忽略了空格。

有w3c feature request for a new property on white-space，理论上可以让CSS从元素中删除所有空格。原始提案是white-space: ignore;，但我更喜欢（并建议）white-space: none;。

然而，似乎不太可能更新white-space，而是建议使用flexbox来适当地删除空格：

_{延伸原始HTML示例：}

.images {
    display: flex;
}

当然，Flexbox有足够的跨浏览器支持在商业环境中使用还需要一段时间，因此暂时我建议坚持使用愚蠢的语法。

Answer 3

有一个很好的技巧可以解决这个问题：

将图片放在<div>内，然后设置

font-size:0px;

到<div>。

您可以继续将元素保留在不同的行中。

Answer 4

我相信如果您在较旧版本的IE中查看，这也是必要的

img {
    border:0
    }

Answer 5

虽然我认为问题来自您的加价和/或CSS中的另一个问题，但我建议确保您已将margin，padding和{ {1}} border元素：

img

此应该处理问题，但如果没有，我们可能需要在JS Bin或{JS Fiddle看到您真正的html和css（或重现问题的现场演示） {3}}）进一步帮助你。

两个<img/>没有间距

5 个答案: