如何調整用CSS添加的引號符號的邊距

我正在嘗試僅使用CSS添加引號。這有效，但我想降低引號內的內容。這是它目前的樣子：如何調整用CSS添加的引號符號的邊距

Screen grab of high quotation marks

的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結構或添加圖像，我覺得這應該是可能的。

來源

2013-01-19 Matthew Strawbridge

你可以在html中包含引號嗎？那麼你可以在''內給他們自己的風格，並調整他們的CSS'行高'？引號是內容的一部分，因此它們應該在html中有意義。 – mattfryercom

嘗試增加：

position: relative; 
top: 19px;

到#quote:before和#quote:after。

我還添加了一些填充到兩個引號...

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

來源

2013-01-19 22:45:48

謝謝。在我的實際頁面上確實會將報價下移。但是，當我向下滾動頁面時，引號保持固定位置。任何想法可能會發生什麼？ –

他們應該處於固定的位置，也就是說，他們應該隨引用的文本一起移動。考慮到您的網頁中包含的容器，可能會發生這種情況......您可以發佈放置該引用的HTML嗎？你應用到容器的CSS可以影響行爲......我向頁面添加了更多文本，即使在滾動時引號也是固定的：http://jsfiddle.net/leniel/GAaBT/1/ –

實際上，改變它使用'position：absolute'而不指定實際位置似乎很好地工作。它們實際上在一個容器中，它本身具有'：before'和'：after'樣式，所以也許會影響它。 –

的原因是，已應用font-size屬性的報價，而不是文字，這就是爲什麼加引號變得很大。嘗試這個。

#quote { 
    font-size:36px; 
} 

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

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

來源

2013-01-19 22:47:36

不，我想大報價。我只是想微調他們內部的內容。 –

如何調整用CSS添加的引號符號的邊距

回答

相關問題