CSS로 추가 된 따옴표 기호의 여백을 조정하는 방법

Question

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에 추가하려고 시도했으나 이는 인용 부호 사이의 텍스트에도 적용됩니다 (특별히 0 또는 음수 상단 여백을 추가하더라도). 또한 패딩을 시도하고 다양한 요소 인라인 블록을 만들었습니다.

CSS를 사용하여 따옴표 만 이동하는 방법이 있습니까? 차라리 HTML 구조를 변경하거나 이미지를 추가하지 않는 편이 좋을 것 같습니다. 추가

Answer 1

시도 :

position: relative; 
top: 19px; 

#quote:before 및 #quote:after합니다. 그 이유는 따옴표이다, http://jsfiddle.net/leniel/GAaBT/

Answer 2

이유는 대신 텍스트의 인용에 글꼴 크기 속성을 적용했다는 것이다 :

은 또한 모두 따옴표에 약간의 패딩 ...

JSFiddle 추가 큰 것으로되었다. 이 시도.

#quote { 
    font-size:36px; 
} 

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

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