gpt4 book ai didi

html - block 之间的空白属性

转载 作者:可可西里 更新时间:2023-11-01 14:58:24 26 4
gpt4 key购买 nike

CSS 的“空白”属性是否应该能够影响 block 元素之间的空白?

例如文档中以“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 :

In elements where the 'xml:space' attribute is set to 'preserve', the user agent must leave all whitespace characters intact (with the exception of leading and trailing whitespace characters, which should be removed). Otherwise, whitespace is handled according to the following rules:

  • All whitespace surrounding block elements should be removed.
  • Leading and trailing whitespace inside a block element must be removed.
  • Line feed characters within a block element must be converted into a space (except when the 'xml:space' attribute is set to 'preserve').
  • A sequence of white space characters must be reduced to a single space character (except when the 'xml:space' attribute is set to 'preserve').

我的问题如下:

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

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

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

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

最佳答案

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

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

  • 风格
  • 脚本
  • PRE

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

In Mozilla, all whitespace in the text content of the original document is represented in the DOM...

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

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

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

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

关于html - block 之间的空白属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3170842/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com