Question

似乎始终保留<q>元素内的前导空格（尽管规范化为单个空格），而大多数内联元素不是这种情况。例如，以下代码（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>使用初始空格进行渲染，而<a>则不会。这是为什么？

编辑：将以下CSS添加到上面的小提琴中：

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

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

Answer 1

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

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

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

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

https://jsfiddle.net/b6p60Lwd/

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

例如：

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

在b之前显示一个空格，而：

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

不显示b之前的空格。

你可以在这里看到它：

https://jsfiddle.net/b6p60Lwd/1/

Answer 2

此处默认应用的普通空格 css规则的行为是将多个空格折叠到一个空格。当您在其之前和之后添加内容时，不再是多个空格，因此它不会崩溃。

请注意，它与前导或尾随空格，内联或非内联或q元素无关。除非您更改空白区域规则，否则所有空格都会以这种方式运行。

如果您将CSS更改为：

，则可以看到结果

body {
    white-space: pre;
}

https://jsfiddle.net/zxvsehs6/

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

Answer 3

这主要是由于＆lt; q＆gt;标签已被设计为执行该特定功能：引用一段文字。如果该文本具有空格，则将显示该空格。引用的目的是＆＃34;复制＆＃34;一段文字，因此是一个引用。所有其他标签都没有空白区域，因为它们是开发人员的输入，因此开发人员可以控制他们想要显示空间的位置。在＆lt; q＆gt;另一方面，标签的内容与键入的内容完全一致，实际上是＃34;引用＆＃34;一段文字。

最后，它取决于HTML开发人员如何选择创建标记。以上段落只是他们选择的原因。

Answer 4

我无法删除空白，但是您可以做的是简单地通过在要尝试定位的元素的伪元素上添加负边距来推断出空白的数量。

以这个简单的文本段落为例。我发现添加负边距补偿的解决方案最适合我：

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>

注意：伪元素之前和之后所需的保证金量可能会发生变化，例如，您可能发现您需要比我在另一侧增加/减少另一边的余量对我来说就是这种情况，但这是可行的。字体大小和样式等...也会增加您需要设置的所需负边距，请注意，这实际上并不能完全消除空白，而只是将其减小到适合的最小理想量您的上下文。我在这里添加了负的边距值，以了解它的工作原理。它确实有效，我知道它更多的是hack，而不是适当的解决方案……似乎无法删除空白默认情况下，在块引用元素上添加，这使得设置理想的负余量以最适合任何上下文有点麻烦。

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

4 个答案: