HTML / CSS中是否有任何内容告诉浏览器完全忽略空格？
很多时候你想把两张图片放在一起 - 你拼命想让HTML保持可读性，但浏览器会在它们之间留一个空格。
所以不要这样：
<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" />
你最终得到了这个
<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" />
哪个太可怕了！
答案 0 :(得分：202)
哦，使用a single line of CSS：
可以轻松实现这一目标#parent_of_imgs { white-space-collapse: discard; }
缺点，你问？ 没有浏览器实现过这个非常有用的功能（一般都考虑内联块）。 ： - （
我不时做的，虽然夜晚很黑，但是使用评论是
<p><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--></p>
答案 1 :(得分：111)
您可以将容器的font-size设置为0，white-space消失！
答案 2 :(得分：47)
在大多数情况下，当浏览器位于块元素旁边时，浏览器会忽略空格。
图像的问题（在这种情况下）是它们是内联元素，所以当你在单独的行上写它们时，它们实际上是同一行上的元素，它们之间有空格（因为换行符算作空格）。浏览器删除图像之间的空格是不正确的，在它们之间用换行符写入图像标记应该像处理它们之间的空格的同一行上的图像标记一样处理。
你可以使用CSS来使图像块元素并将它们彼此相邻浮动，这解决了间距方面的许多问题，图像之间的空间和图像下方文本行的间距。
答案 3 :(得分：37)
不幸的是，换行符算作空格字符。
我提出的最佳解决方案是使用标签内部的空白而不是外部：
<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黑客依赖于渲染空间角色的大小或诉诸相对定位，或JavaScript：）
答案 4 :(得分：24)
最新的解决方案是在外部容器上使用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容器中。
答案 5 :(得分：18)
<style>
img {
display: table-cell
}
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...
好的，我可能很幸运，我现在只需要担心在webkit中使用它（特别是QT中嵌入的那个），所以它也适用于Chrome和Safari。似乎display: table-cell具有显示的所有好处：inline-block，但没有空格缺点（想想缩进的td）
答案 6 :(得分：16)
这个解决方案有什么困难？
.no-whitespace {
line-height: 0;
font-size: 0;
}
<span class="no-whitespace">
<a href=# title='image 1'>
<img src='/img/img1.jpg' alt='img1'/>
</a>
<a href=# title='image 2'>
<img src='/img/img2.jpg' alt='img2'/>
</a>
<a href=# title='image 3'>
<img src='/img/img3.jpg' alt='img3'/>
</a>
</span>
答案 7 :(得分：6)
图像是默认的内联元素，这就是为什么你会看到它们之间的空白。如果你在屏幕阅读器中听你的例子，你会立即知道原因：没有空格，你会听到：
我迷你的东西迷你的东西迷你的东西迷你的东西
因此，使用my mini thing.（最后点加空格）作为替代文字或将图像与CSS一起推送。不要只删除代码中的空格。
答案 8 :(得分：3)
如果你正在使用 php ，这非常有用。我找到了解决方案here。
在使用 simplexml 解析 html 之后，我原本想要删除仅包含whitespace的文本节点，但这要便宜得多。< / p>
<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
<img src='./mlp.png'/>
<img src='./dbz.png'/>
<img src='./b10af.png'/>
<img src='./fma.png'/>
<?ob_end_flush;?>
答案 9 :(得分：2)
这是一个简单的问题，答案并非如此简单。
可以尝试避免源代码中的空间，这在CMS中并不总是可以实现，因为它们会由系统自动插入。如果你想改变它，你必须深入挖掘CMS的核心代码。
然后你可以尝试使用左浮动图像。但这很危险。首先，根据定义，您实际上无法控制垂直对齐。其次，如果你有太多的浮动元素，你会遇到完全混乱，它们会延伸超过一行。如果你有一个依赖于左浮动元素的布局（今天大多数都这样做）你甚至可以打破一些外部浮动样式，如果你在图像后清除浮动。如果你浮动任何周围的元素，这可以被覆盖。而不是被推荐。
因此，唯一的解决方案是处理空白处理过程的CSS声明。这不是任何标准的一部分（因为CSS 3尚未完成）。
我更喜欢HTML变体中没有空格。使用drupal作为CMS，可以在template.php和主题文件中轻松实现。然后我选择内联块。
P.S .: 内联块在进入不同的浏览器时相当复杂。 对于FF 2，您需要显示：-moz-inline-box。 其余的和IE8可以显示：紧跟在后面的内联块。 对于IE 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 */
}
答案 10 :(得分：1)
试试这个CSS：
img { display: table-cell; }
答案 11 :(得分：0)
缩小HTML！
最好在将呈现给浏览器之前缩小响应。
因此，除非您需要空格（并使用 对其进行硬编码），否则您始终会删除缩小过程中的空格。