忽略 HTML 中的空格 [重复]

Question

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" />

这太可怕了！

Answer 1

很遗憾，换行符算作空格字符。

我想出的最佳解决方案是使用标签本身内部的空格，而不是外部：

  <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 :)

Answer 2

哦，你可以用a single line of CSS很容易做到这一点：

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

缺点，你问？ 目前还没有浏览器实现了这个非常有用的功能（想想一般的内联块）。 :-(

我时不时做的，虽然夜深了难看，但就是用cmets：

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

Answer 3

试试这个 CSS：

img { display: table-cell; }

Answer 4

对此的最新解决方案是在外部容器上使用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 容器中。

Answer 5

您可以将容器的font-size设置为0，white-space就消失了！

Answer 6

如果您使用的是 php，这将非常有效。我找到了解决方案here。

我最初是在用 simplexml 之类的东西解析 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;?>

Answer 7

这个解决方案有什么困难？

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>

Answer 8

缩小您的 HTML！

最好在响应呈现给浏览器之前缩小响应。

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

Answer 9

<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）

Answer 10

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

可以尝试避免源代码中的空格，这在 CMS 中并不总是可以实现，因为它们是由系统自动插入的。如果你想改变这一点，你必须深入挖掘 CMS 的核心代码。

然后您可以尝试使用左浮动图像。但这很危险。起初，您实际上并不能根据定义控制垂直对齐。其次，如果你有太多的浮动元素，你会陷入完全的混乱，以至于它们超过了一条线。如果你有一个依赖于左浮动元素的布局（今天大多数都是这样做的），你甚至可以打破一些外部浮动样式，如果你在图像之后清除浮动。如果您浮动任何周围的元素，这可以被覆盖。而不是推荐。

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

我更喜欢 HTML 变体中没有空格。使用 drupal 作为 CMS，这可以在您的 template.php 和主题文件中轻松实现。然后我选择 inline-block。

附： inline-block 在不同的浏览器中是相当复杂的。 对于 FF 2，您需要显示：-moz-inline-box。 其余的和 IE8 可以有 display: inline-block 之后。 对于 lte IE 7，您需要 display: inline 在以下单独的声明中（最好通过条件 cmets）。

编辑

我用什么来制作元素内联块

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 */
}

Answer 11

在大多数情况下，当它靠近块元素时，浏览器会忽略空格。

图像的问题（在这种情况下）是它们是内联元素，所以当你将它们写在不同的行上时，它们实际上是同一行上的元素，它们之间有一个空格（因为换行符算作一个空格）。浏览器删除图像之间的空格是不正确的，在它们之间写入带有换行符的图像标签应该与在它们之间带有空格的同一行上写入图像标签的处理方式相同。

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

Answer 12

图像是默认的内联元素，这就是为什么你会在它们之间看到空白。如果您在屏幕阅读器中聆听您的示例，您会立即知道原因：没有空格，您会听到：

我的小东西我的小东西我的小东西我的小东西

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