9

看起来 HTML 代码中的额外换行符可能会在最终输出中添加不需要的空格。我一直认为,无论我如何布局我的 HTML 代码,都不会影响渲染结果的外观。但这里有一个例子:

<h2>
    <a href="#">Hello.</a>World
</h2>

将显示:“ Hello.World ” - 一切都和预期的一样好

<h2>
    <a href="#">Hello.</a>
    World
</h2>

将显示:“ Hello. World ” -点后有一个额外的空格!

有机会摆脱这种影响吗?我想把我的代码放在不同的行上——而不是产生额外的空间。

4

5 回答 5

19

你可以使用评论:

<h2>
    <a href="#">Hello.</a><!--
    -->World
</h2>

或将空格放在标签内:

<h2>
    <a href="#">Hello.</a
    >World
</h2>
于 2009-11-15T10:00:33.590 回答
7

不,没有,在这种情况下没有。

在 HTML 中,所有的空格都算作空格,但是一个接一个的几个空格字符只能算作一个。因此,您的代码相当于:

<h2> <a href="#">Hello.</a> World </h2>

与块元素相邻的空格被删除,但文本内的空格不被删除。由于锚标记是一个内联元素,它不能删除它旁边的空间,因为这会改变内容。所以,在删除它可以的空格之后,剩下的就是:

<h2><a href="#">Hello.</a> World</h2>

所以,你可以在任何你喜欢的地方有额外的空白,只要它不是内容的一部分。这:

<h2    >

  <p >  test      test    </p     >

  <p   >  test       test  </p  >

</h2   >

将等同于(删除不影响结果的空格后):

<h2><p>test test</p><p>test test</p></h2>
于 2009-11-15T09:33:53.517 回答
1

新行总是翻译成空格。当每个列表项元素都写在新行中时,IE 上的情况甚至会变得更糟。悲伤但真实。

于 2009-11-15T09:26:59.383 回答
1

恐怕你不能。任何一组空白都被视为一个空格。

替代:

<h2>
    <a href="#" style="float: left;">Hello.</a>
    <span style="float: left;">World</span>
</h2>

但是由于浮动元素,您将有另一组问题需要解决。

于 2009-11-15T09:29:08.723 回答
0

假设 HTML 按照您希望的方式工作。然后说我想要空间。你让我怎么创造它们?&nbsp;每次都添加一个特殊字符?

于 2009-11-15T12:21:22.147 回答