blockquote cytaty styl

Question

Próbuję zrobić styl blockquote gdzie cytaty otwarcia i zamknięcia są większe niż tekst, ale nadal mieści się na swojej linii, coś w tym example http://s17.postimage.org/ypvv8xxtb/blockquote.png

Jest to kod mam http://jsfiddle.net/EnL3R/2/

Otwarty cytat pokazuje powyższy tekst, a zarówno otwarte, jak i końcowe cytaty wprowadzają pewne marginesy, zdaję sobie sprawę, że dzieje się tak dlatego, że postać w samej czcionce ma tę białą przestrzeń, czy w ogóle mogę to zrekompensować?

Answer 1

Modified padding, margin, display i position atrybuty, a teraz wydaje się być wyświetlany ok:

blockquote span { 
    font-size:100px; 
    color:black; 
    position: relative; 
    display:inline-block; 
    padding:0px; 
} 

blockquote span.primo { 
    margin: -40px 0 -100px 0; 
    bottom: -40px; 
} 

blockquote span.ultimo { 
    margin:-130px 0 0 0; 
    bottom:0px; 
} 

/* IE7 only styles */ 
blockquote span { 
    *display: inline; zoom: 1; /* IE7 fix for inline-block */ 
} 
blockquote span.primo { 
    *margin: -20px; *bottom: -20px; /* IE7 position adjustment */ 
} 
blockquote span.ultimo { 
    *margin: -50px; /* IE7 position adjustment */ 
} 

http://jsfiddle.net/EnL3R/26/ (że żółta obwódka wokół tagu span jest tylko do testowania)

Answer 2

Jeśli don Nie musisz się martwić o wyświetlanie w ie7 lub starszym, myślę, że pseudo elementy będą do zrobienia. http://jsfiddle.net/EnL3R/16/

Answer 3

Wygląda na to, że lepiej wykorzystać obrazy. Jeśli spróbujesz użyć tekstu do cudzysłowu, natkniesz się na fakt, że sam cudzysłów jest tylko niewielką częścią wysokości linii.

Możesz po prostu umieścić zdjęcia w swoich materiałach i użyć vertical-align, aby uzyskać właściwe pozycjonowanie. Jeśli nie potrzebujesz wsparcia dla IE 7 lub poniżej, możesz nawet umieścić je w CSS, w pseudoelementach :before i.

blockquote :first-child:before { 
    content: url('images/openquote.png'); 
    } 

blockquote :last-child:after { 
    content: url('images/closequote.png'); 
    vertical-align: -35px; /* tuned to fit image */ 
} 

Demo: http://jsfiddle.net/EnL3R/17/

Answer 4

Aktualizacja styl blockquote .. sprawdź poniżej kod do niego.

blockquote { 
    font-size: 18px; 
    padding:20px; 
    text-transform: uppercase; 
} 
blockquote:before { 
    top: 10px; 
    left: 20px; 
    content: "\201C"; 
} 
blockquote:after { 
    top:80px; 
    content: "\201D"; 
} 
blockquote:before, blockquote:after { 
    position: absolute; 
    width: 60px; 
    height: 60px; 
    font-size: 80px; 
    line-height: 1; 
    color: #dd7975; 
} 

check this link więcej zrozumienia .....