为什么 q 元素中的前导空格与其他内联元素的处理方式不同？

Question

<q> 元素中的前导白色 space 似乎总是被保留（尽管标准化为单个 space），而大多数内联元素并非如此.例如下面的代码(jsFiddle):

<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q>  test</q> b <a href=#>  test</a> c
<br> a <q>test  </q> b <a href=#>test  </a> c
<br> a <q>  test  </q> b <a href=#>  test  </a> c

在我测试过的所有现代浏览器（Chrome、FF 和 Edge）中呈现这样的效果：

在第二行和第四行中，<q> 以初始白色呈现space，而<a> 则不是。这是为什么？

编辑： 将以下 CSS 添加到上面的 fiddle 中：

a::before, a::after {
   content: '"';
}

使它们呈现相同。所以它似乎与 CSS ::before 选择器有关。

Answer 1

这主要是因为标签被设计用来执行特定功能：引用一段文本。如果那段文字是白色的 space，那么就会显示 space。引用是指 "copy" 一段文字，因此是引用。所有其他标签都没有白色 space，因为它们是开发人员的输入，因此开发人员可以控制他们希望 space 显示的位置。另一方面，在 < q > 标签中，标签的内容完全按照输入显示，实际上是 "quote" 一段文本。

最终，这取决于 HTML 的开发人员如何选择创建标签。上面这段只是自己选择的推理

Answer 2

正常的white-space css规则的行为是折叠多个whitespace到一个 space。当您在前后添加内容时，它不再是 multiple whitespace，因此它不会崩溃。

请注意，它与前导或尾随 space、内联与否或 q 元素没有任何关系。除非您更改 white-space 规则，否则所有 whitespace 都会以这种方式运行。

如果将 CSS 更改为：

，您可以看到结果

body {
    white-space: pre;
}

https://jsfiddle.net/zxvsehs6/

参见：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 3

根据 Chrome's docs on default styles for HTML elements，<q> 元素（引用）的默认样式是：

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

如您所见，如果将相同的样式应用于 <a> 元素（锚点），您会得到相同的结果：

body {
  font-size: 200%;
}

q {
  background-color: #AAF;
}

a {
  background-color: #FAA;
}
a::before {
  content: open-quote;
}

a::after {
  content: close-quote;
}

<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q>  test</q> b <a href=#>  test</a> c
<br> a <q>test  </q> b <a href=#>test  </a> c
<br> a <q>  test  </q> b <a href=#>  test  </a> c

理解这一点的关键在于解释什么是::before和::after。 According to MDN，它们创建一个伪元素，它是匹配元素的第一个（对于 ::before）或最后一个（对于 ::after）子元素。所以你可以想象，一个内含引号的内联元素被添加为每个 <q>.

的第一个子元素

例如：

<br> a <span><span>"</span>    b</span>

在 b 之前显示一个 space，而：

<br> a <span>    b</span>

不显示 b 之前的 space。

您可以在此处查看实际效果：

body {
  font-size: 200%;
}

q {
  background-color: #AAF;
}

a, span {
  background-color: #FAA;
}

<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q>  test</q> b <a href=#>  test</a> c
<br> a <q>test  </q> b <a href=#>test  </a> c
<br> a <q>  test  </q> b <a href=#>  test  </a> c
<br> a <span><span>"</span>    a</span>
<br> a <span>    a</span>

Answer 4

我无法删除 white-space 但你可以做的是通过在元素的伪元素上添加负边距来推断 white-space 的数量您正在尝试定位。

以这段简单的文字为例。我发现添加负边距偏移的解决方案最适合我：

html:

<p>This is my paragraph of text to demonstrate how this will work for you too!</p>

css:

<style>

p {

    font-size: 1.5rem;
    font-family: verdana;
}

//Pseudo element for the opening quote
p::before {

    content: open-quote;
    margin-right: -5px;
}

//Pseudo element for the closing quote
 p::after {

    content: close-quote;
    margin-left: -10px;
}
</style>

注意：前后伪元素所需的边距量可能会有所不同，例如，您可能会发现需要 increase/decrease 一侧的边距比另一侧多我发现的其他情况对我来说就是这种情况，但这会起作用。字体大小和样式等...也将添加到您需要设置的所需负边距中，请记住这实际上并没有完全删除 white-space ，而是将其减少到最小适合您的情况的理想数量。玩一玩我在这里添加的负边距值，看看它是如何工作的……它是有效的，我知道它更像是一个黑客而不是一个正确的解决方案……似乎不可能删除白色-space 默认添加在块引用元素上，这使得设置理想的负边距以最适合任何上下文变得有点乏味。

为什么 q 元素中的前导空格与其他内联元素的处理方式不同？

Why is leading whitespace in a q element treated differently from other inline elements?

html

css

browser

whitespace

removing-whitespace