【问题标题】:The white-space property between blocks块之间的空白属性
【发布时间】:2011-03-11 09:28:22
【问题描述】:

CSS 'white-space' 属性是否应该能够影响块元素之间的空白?

例如,在下面以“Whitespace in the DOM”为例的文档中,</h1><p>之间有空格:

<!-- My document -->
<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>
    Paragraph
  </p>
</body>
</html>

这个空格通常会被删除;例如the XHTML spec says that a conforming user agent must meet all of the following criteria:

在 'xml:space' 的元素中 属性设置为“保留”,则 用户代理必须保留所有空格 字符完整(除了 前导和尾随空格 字符,应删除)。 否则,处理空格 根据以下规则:

  • 应删除块元素周围的所有空白。
  • 块元素内的前导和尾随空格必须是 删除。
  • 块元素中的换行符必须转换为空格 (“xml:space”属性除外 设置为“保留”)。
  • 必须将一系列空白字符缩减为一个空格 字符(“xml:space”除外 属性设置为“保留”)。

我的问题如下:

  • 如果我在&lt;body&gt; 上使用CSS white-space property,这是否能够保留块元素之间的空白(例如&lt;/h1&gt;&lt;p&gt; 之间)?还是总是删除块之间的空白,而 white-space 属性只影响块内的空白?

  • XHTML 规范说 &lt;body&gt; cannot directly contain PCDATA(即文本)。这是否意味着作为&lt;body&gt; 标记的直接子级的空白(作为一种文本)总是无关紧要/被忽略,并且不能通过 CSS 启用?如果是,并且上例中 &lt;/h1&gt;&lt;p&gt; 之间的空格被忽略,因为它是 &lt;body&gt; 的直接子代,如果在 @ 中立即有一个 &lt;div style="white-space: pre"&gt;,该空格是否仍会被忽略987654339@ 并包含所有其他元素?

  • The 'white-space' processing model 以“任何直接包含在块元素内(而不是内联元素内)的文本都应被视为匿名内联元素”开头。关于纯空白(没有文字的空白)我应该了解什么?

  • 是否有关于删除内联元素中的空格的规则(如果有,该规则在哪里定义)?例如在以下序列中&lt;p&gt;The &lt;strong&gt; lazy &lt;/strong&gt; dog.&lt;/p&gt; 是否应该删除&lt;strong&gt; 标记之后的空格? (HTML 4 规范有 a rule about this for line breaks;我想知道这条规则是否也适用于其他非行喙空白,以及是否在任何 XHTML 或 CSS 规范中提到/定义/允许/假定了这条规则。)

【问题讨论】:

    标签: html css xhtml whitespace


    【解决方案1】:

    你的问题确实引起了我的好奇。希望我能对它们有所了解。

    XHTML schema 将以下三个元素声明为preserve

    • STYLE
    • SCRIPT
    • PRE

    这意味着所有其他容器元素都应该抑制它们周围的空格。您的 Mozilla 链接 ("Whitespace in the DOM") 显示:

    在 Mozilla 中,文本中的所有空格 原始文件的内容是 在 DOM 中表示...

    当运行包含大量空格和中断的测试页面时,这一点变得很明显。查看生成的代码(您可以使用 Web Developer 工具栏:选择 View Source - View Generated Source)显示“文本内容" 表示 HTML 根标签内的所有内容。因此,换句话说,最外层标签 (HTML) 上只有空格抑制。

    在 IE8 中运行相同的页面会讲述一个稍微不同的故事(按 F12 查看生成的源代码,然后在开发者工具中按 CTRL - G)。它们也不是 100% 符合,但比 Firefox 更符合。他们不仅压制了HTML 元素,而且压制了几乎所有其他东西(应该如此)。他们注意到SCRIPTSTYLE 元素的preserve 规则,但仍然在两者之间留有空隙。在正文中,它用单次中断代替了多次中断。单行上的嵌套 DIV 标签(及其内容文本)被分隔符分开。

    简而言之,Firefox 和 IE8 都不是符合标准的用户代理

    不,您不能使用white-space 属性抑制两个标签之间的空格(如果您真的想的话,您可能可以使用JavaScript/jQuery 来实现)。 white-space 属性指定如何处理元素内容部分中的空格(例如,white-space: nowrap 防止文本换行)。

    【讨论】:

    • 我认为两个块之间的空格应该被自动抑制(但我不确定哪个规范指定)。我想知道 white-space 属性是否意味着能够保留/呈现块之间的空白(通常被抑制)。
    • 是的,根据架构,两个块之间的空格应该被抑制,但这并不是因为 Mozilla 决定不遵循架构。如果他们遵循了架构,则white-space 属性只会在两个块被white-space 设置为pre 的元素(例如PRE 元素)包裹的情况下保留该空格。
    • 我的印象是,根据现代规范(例如 XHTML v2 规范),解析器从未从 DOM 中删除任何空白,而是始终在 DOM 中,并且根据 CSS 空白设置显示或不显示。
    猜你喜欢
    • 1970-01-01
    • 2015-12-17
    • 2013-09-30
    • 1970-01-01
    • 2012-09-17
    • 1970-01-01
    • 2011-09-04
    • 2012-09-25
    • 1970-01-01
    相关资源
    最近更新 更多