忽略HTML中的空格
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" />
这太可怕了！
哦，你可以很容易地用一行CSS完成 ：
#parent_of_imgs { white-space-collapse: discard; }
缺点，你问？ 没有浏览器已经实现了这个非常有用的功能（一般认为是内联块）。 🙁
我不时做的事情，虽然黑夜很丑，但要用评论：
<p><!-- --><img src="." alt="" /><!-- --><img src="." alt="" /><!-- --><img src="." alt="" /><!-- --><img src="." alt="" /><!-- --></p>
您可以将容器的font-size设置为0 ，并且white-space消失！
浏览器在大多数情况下在块元素旁边忽略空格。
图像的问题（在这种情况下）是它们是内联元素，所以当你将它们写在不同的行上时，它们实际上是同一行上的元素，它们之间有一个空格（因为换行符是一个空格）。 浏览器删除图像之间的空格是不正确的，在它们之间用换行符来书写图像标签应该和在图像标签之间用空格写同一行的方法一样。
您可以使用CSS来使图像块元素和它们相互浮动，从而解决了很多间距的问题，图像之间的空间和图像下面的文本行上的间距。
不幸的是，换行符被认为是空格字符。
我想到的最好的解决方案是在标签本身内部使用空格而不是外部：
<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的:)
最新的解决方案是使用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容器。
<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的）
这个解决方案有什么困难？
CSS
.no-whitespace { line-height: 0; font-size: 0; }
HTML
<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>
图像是默认的内联元素，这就是为什么你看到它们之间的空白。 如果你在屏幕阅读器中听你的例子，你马上知道为什么：没有空白，你会听到：
我的迷你thingmy迷你thingmy迷你thingmy迷你的东西
所以，用my mini thing. （点加上空白在最后）作为替代文字或CSS与图像推在一起。 不要只是删除代码中的空格。
如果你正在使用PHP ，这个工程奇妙。 我在这里找到了解决方案。
我最初正在寻找一些东西来解析html之后，只用whitespace来组成的文本节点，但是这样更便宜。
<?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;?>
这是一个简单的问题，答案并不那么简单。
可以尝试避免源代码中的空格，这在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 */ }
试试这个CSS：
img { display: table-cell; }
缩小你的HTML！
在呈现给浏览器之前缩小响应是一个很好的做法。
因此，除非您需要空间（并且您使用硬编码方式），否则您总是会在缩小过程中删除空格。
