如何调整用 CSS 添加的引号符号的边距答案

【问题标题】：How can I adjust the margins of quote symbols added with CSS如何调整用 CSS 添加的引号符号的边距
【发布时间】：2013-01-20 07:09:46
【问题描述】：

我正在尝试仅使用 CSS 添加引号。这行得通，但我想就其中的内容降低引号。这是它目前的样子：

HTML：

<p id="quote">This is a quotation.</p>

CSS：

#quote {
}

#quote:before {
    content: "\201C";
    font-family: Garamond, Palatino, Roman, "Times New Roman", serif;
    font-size: 36pt;
}

#quote:after {
    content: "\201D";
    font-family: Garamond, Palatino, Roman, "Times New Roman", serif;
    font-size: 36pt;
}

还有一个JS Fiddle。

我尝试为#quote:before 和#quote:after 添加上边距，但这似乎也适用于引号之间的文本（即使我专门为此添加了零或负上边距）。我也尝试过填充和制作各种元素内联块。

有没有办法使用 CSS 将引号向下移动？我宁愿避免更改 HTML 结构或添加图像，我觉得这应该是可能的。

【问题讨论】：

能否在 html 中包含引号？然后你可以在<span> 中给他们自己的风格并调整他们的css line-height？引号是内容的一部分，因此在 html 中应该是有意义的。

标签： html css margin double-quotes

【解决方案1】：

尝试添加：

position: relative;
top: 19px;

致#quote:before 和#quote:after。

我还在两个引号中添加了一些填充...

JSFiddle：http://jsfiddle.net/leniel/GAaBT/

【讨论】：

谢谢。在我确实将引号向下移动的实际页面上。但是，当我向下滚动页面时，引号保持在固定位置。知道会发生什么吗？
它们应该在一个固定的位置，也就是说，它们应该与你引用的文本一起移动。鉴于您在页面中拥有的容器，这可能会发生...您可以发布放置此引用的 HTML 吗？您应用到容器的 CSS 会影响行为...我在页面中添加了更多文本，即使在滚动时引号也是固定的：jsfiddle.net/leniel/GAaBT/1
实际上，在不指定实际位置的情况下将其更改为使用position: absolute 似乎效果很好。它们实际上位于一个容器内，该容器本身具有 :before 和 :after 样式，所以这可能会影响它。
当然...所以将其更改为absolute 就可以了。惊人的。只需在您支持的所有浏览器中测试它并坚持下去！ :)

【解决方案2】：

原因是您将字体大小属性应用于引号而不是文本，这就是引号变大的原因。试试这个。

#quote {
    font-size:36px;
}

#quote:before {
    content: "\201C";
}

#quote:after {
    content: "\201D";
}

【讨论】：

不，我想要大引号。我只是想稍微调整一下它们里面的内容。