忽略HTML中的空白[重复]

缩小您的HTML！

最好在将响应呈现给浏览器之前将其最小化。

因此，除非需要空格（并使用对其进行了硬编码 ），否则始终在缩小过程中删除空格。

试试这个CSS：

img { display: table-cell; }

Images are per default inline elements, that’s why you see whitespace between them. If you listen to your example in a screen reader, you immediately know why: without whitespace, you’d hear:

my mini thingmy mini thingmy mini thingmy mini thing

因此，请使用my mini thing.（最后加点号和空格）作为替代文字，或将图像与CSS一起推送。不要只删除代码中的空格。

这是一个简单的问题，答案不是那么简单。

可以尝试避免源代码中的空格（在CMS中并非总是如此），因为空格是系统自动插入的。如果要更改此设置，则必须深入了解CMS的核心代码。

然后，您可以尝试使用浮动的图像。但这很危险。刚开始，您实际上并不能完全控制垂直对齐。其次，如果您有太多的浮动元素，它们会延伸超过一行，那么您将陷入混乱。而且，如果您的布局依赖于左浮动元素（大多数现在都是这样），并且在图像之后清除浮动，甚至可以打破某些外部浮动样式。如果您浮动任何周围的元素，则可以覆盖此方法。而不是被推荐。

因此，唯一的解决方案是处理空白处理过程的CSS声明。这不是任何标准的一部分（因为CSS 3尚未完成）。

我更喜欢HTML变体中的无空格。通过使用drupal作为CMS，可以在template.php和主题文件中轻松实现。然后，我选择内联块。

PS：要在不同的浏览器中使用，内联块非常复杂。对于FF 2，您需要显示：-moz-inline-box。其余和IE8可以显示：inline-block之后。对于IE 7，您需要显示：在以下单独的声明中内联（最好通过条件注释）。

编辑

我用来制作元素内联块的内容

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}

<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

好的，我可能很幸运，因为我现在只需要担心可以在webkit（特别是QT中嵌入的那个）中使用它，以便它也可以在Chrome和Safari中使用。Seems display: table-cell具有display的所有优点：inline-block，但没有空白缺陷（请考虑缩进td）

在大多数情况下，当浏览器位于block元素旁边时，它们不会忽略空格。

图像的问题（在这种情况下）是它们是内联元素，因此当您将它们写在单独的行上时，它们实际上是同一行上的元素，并且它们之间有一个空格（因为换行符算作一个空格）。对于浏览器来说，删除图像之间的空格是不正确的，应该以与图像标签在它们之间有换行符的方式相同的方式来处理图像标签，这些图像标签之间应使用换行符。

您可以使用CSS来制作图像块元素并使它们彼此相邻浮动，这解决了很多间距问题，包括图像之间的间距和图像下方文本行上的间距。

最新的解决方案是display: flex在外部容器上使用，您可以通过以下示例进行尝试：

Codepen→

（是的，Flexbox得到了广泛的支持：http ://caniuse.com/#search=flexbox ）

HTML：

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

的CSS

.box {
  display: flex;
  display: -webkit-flex;    
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}

更新：此外，如果您希望包装物品（就像标准的内联块元素一样），请不要忘记将其添加flex-wrap: wrap到flexbox容器中。

您可以设置font-size的的容器来0和white-space消失！

不幸的是，换行符算作空格字符。

我想出的最好的解决方案是在标签内部而不是外部使用空格：

  <img src="images/minithing.jpg" alt="my mini thing" 
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />

我也不知道，这也不理想。但是至少不是有些怪异的CSS hack依赖于呈现空格字符或依靠相对位置或JavaScript的大小：）

哦，您只需一行CSS就可以轻松实现：

#parent_of_imgs { white-space-collapse: discard; }

劣势，你问？尚无浏览器实现此极其有用的功能（通常考虑内联块）。:-(

我有时会做些什么，尽管黑夜很丑，但还是要使用注释：

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>