ब्लॉककोट उद्धरण शैली

Question

मैं एक ब्लॉककोट शैली बनाने के लिए जहां उद्घाटन और समापन उद्धरण पाठ से भी बड़ा कर रहे हैं कोशिश कर रहा हूँ, लेकिन अभी भी अपनी लाइन पर फिट, इस example http://s17.postimage.org/ypvv8xxtb/blockquote.png

कुछ इस तरह कोड है मैं http://jsfiddle.net/EnL3R/2/

है

खुले उद्धरण टेक्स्ट के ऊपर दिखाता है, और खुले और समापन उद्धरण दोनों पर कुछ मार्जिन डालते हैं, मुझे एहसास है कि ऐसा इसलिए है क्योंकि फ़ॉन्ट में चरित्र के पास यह सफेद स्थान है, वैसे भी मैं इसे क्षतिपूर्ति कर सकता हूं?

Answer 1

संशोधित padding, margin, display और position गुण और अब यह ठीक प्रदर्शित करने के लिए लग:

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/

Answer 2

(कि span टैग के आसपास पीले सीमा केवल परीक्षण के लिए है) यदि आपके पास यानी 7 या पुराने में प्रदर्शित होने की चिंता करने की ज़रूरत नहीं है, मुझे लगता है कि छद्म तत्व जाने का रास्ता होगा। http://jsfiddle.net/EnL3R/16/

Answer 3

ऐसा लगता है कि आप छवियों का उपयोग करके बेहतर हो सकते हैं। यदि आप उद्धरण चिह्नों के लिए पाठ का प्रयास करते हैं और उपयोग करते हैं, तो आप इस तथ्य के खिलाफ दौड़ते हैं कि उद्धरण चिह्न स्वयं लाइन ऊंचाई का केवल एक छोटा सा हिस्सा है।

आप बस अपनी सामग्री में छवियां डाल सकते हैं और स्थिति को सही करने के लिए vertical-align का उपयोग कर सकते हैं। यदि आपको आईई 7 या उससे नीचे के लिए समर्थन की आवश्यकता नहीं है, तो आप उन्हें :before और :after छद्म-तत्वों में, सीएसएस में भी डाल सकते हैं।

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 */ 
} 

डेमो: http://jsfiddle.net/EnL3R/17/

Answer 4

अद्यतन ब्लॉककोट की शैली .. इसके लिए नीचे दिए गए कोड की जाँच करें।

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; 
} 

अधिक समझ के लिए चेक this link .....