logo标签列表

两个没有间距的<img>标签

htmlcssimage
5
<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>

为什么这些图片之间总是有一个小间隙，即使我在body和页面上的所有其他元素中都将padding和margin设置为0？
好的，这是完整未经编辑的代码。
编辑：刚刚发现这是两个IMG之间的换行符。 所以... 我不能在两个元素之间按回车键吗？哈哈... :)
1
你能给我们提供你的CSS代码吗？ - Sotiris
你的代码本身并不是问题所在：http://jsbin.com/atigu5 - 但你没有展示给我们的代码才是导致问题的原因。 - David Hedlund
你已经确保图像在实际图像中没有任何边框。 - Matt Lacey
据我所知，在没有任何CSS的情况下，它不应该在中间有任何空格。您能否创建一个出现问题的小样本页面？ - kander
将img边框设为0。 - Bajrang
5个回答
6

我不能在两个元素之间按回车键？哈哈... :)

在大多数 HTML 的部分中，无法区分一种空格与另一种空格。

然而，你可以通过以下方式格式化你的代码：

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

…去除元素之间的空格。

1
谢谢，但我仍觉得这很奇怪 :) - denicio
5
默认情况下，图像以行内方式显示，这可能是您遇到的问题。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对white-space的新属性进行特性请求，理论上可以允许CSS从元素中删除所有空格。最初的建议是white-space: ignore;，但我更喜欢（并建议）white-space: none;。
然而，更新white-space似乎不太可能发生，而建议使用flexbox适当地删除空格：
.images {
    display: flex;
}

当然，要在商业环境中使用flexbox还需要一些时间才能得到足够的跨浏览器支持，因此目前我建议继续使用“鱼鳞语法”。
这是我经过相当长时间的回顾后得出的最完整的答案。此外，我想补充你的答案，即有一个“inline-block”，它似乎是对我最初问题的最正确的回答。 - denicio
3

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

将您的图像放在一个 <div> 中，然后设置

font-size:0px;

到 <div>。

您可以继续将元素保持在单独的行中。

1

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

img {
    border:0
    }
1

虽然我认为问题可能来自于标记或CSS的其他点，但我建议确保您已将margin、padding和border都归零了，以适用于img元素：

img {
margin: 0;
padding: 0;
border-width: 0;
}

这个应该解决问题，但如果不行，我们可能需要看到您的真实HTML和CSS（或者在JS Bin或JS Fiddle上重现问题的实时演示）以便更进一步地帮助您。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接