लाइन रिक्ति निर्धारित करें


145

मैं सीएसएस के साथ लाइन स्पेसिंग कैसे सेट कर सकता हूं, जैसे हम इसे एमएस वर्ड में सेट कर सकते हैं?

जवाबों:


236

लाइन-ऊंचाई संपत्ति का प्रयास करें ।

उदाहरण के लिए, 12px फ़ॉन्ट-आकार और नीचे और ऊपरी लाइनों से 4px दूर:

line-height: 20px; /* 4px +12px + 4px */

या emइकाइयों के साथ

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

10
मैंने पाया display: block;कि इन सेटिंग्स के लिए मुझे हर जगह प्रभावी होना चाहिए, न कि केवल पैराग्राफ के ऊपर और नीचे।
पैट्रिक टीटी

2
याद रखें कि यदि आप इसे <a> तत्व पर सेट कर रहे हैं, तो आप '1' या '100%' के तहत लाइन-ऊंचाई की संपत्ति का मूल्य निर्धारित नहीं कर सकते। यदि आप ऐसा चाहते हैं, तो आप उदाहरण के लिए अपने पाठ और अपने <a> के बीच <p> सेट कर सकते हैं।
रुलचोपी

2
यह स्पैन के साथ काम नहीं करता है क्योंकि @PatrickT स्पैन द्वारा उल्लिखित प्रदर्शित नहीं होता है: ब्लॉक
Walv

1
@walv, यह नहीं माना जाता है। यदि आपको किसी स्पैन में इसका उपयोग करने की आवश्यकता है, तो यह डिस्प्ले का उपयोग करने के लिए बेहतर है: डिस्प्ले के बजाय इनलाइन-ब्लॉक: ब्लॉक।
मारियो सीजर

1
@Userthatisnotauser आप एक ऐसी चीज नहीं कर सकते हैं जो उन उपयोगकर्ताओं के लिए होगी जिन्हें जावा एप्लेट या वेब एप्लिकेशन का उपयोग करना होगा जिनके लिए that सॉकेट की आवश्यकता होती है (क्योंकि ɴᴘᴀᴘɪ समर्थन के खो जाने के कारण और सभी ब्राउज़र अपने कस्टम प्लग इन में in में समर्थन वापस ले रहे हैं) । कैसिनी मिशन को समर्पित requires वेब साइट को अभी भी अपने वीडियो को ऑनलाइन देखने के लिए त्वरित समय प्लगइन की आवश्यकता होती है। केवल allows प्लगइन्स का उल्लेख नहीं करना आपको स्ट्रीमिंग में स्टीरियोस्कोपिक डिस्प्ले के माध्यम से स्टीरियोस्कोपिक वीडियो देखने की अनुमति देता है। मेरे देश में, दो प्रमुख टीवी चैनल प्रदाता को अभी भी अपग्रेड न करने की योजना के साथ चांदी की रोशनी की आवश्यकता है।
11:22 बजे user2284570

103

आप एक यूनिट-कम मूल्य का उपयोग भी कर सकते हैं, जो कि लाइनों की संख्या है: line-height: 2;डबल स्पेस है, line-height: 1.5;डेढ़ है, आदि।


यह प्रेस्टो आधारित ओपेरा में काम नहीं करता है। मुझे वर्कअराउंड की आवश्यकता है ... कृपया! : \
user2284570

@user स्थिति: मेरी मशीन पर काम करती है। क्या आपने कोई अन्य उत्तर देने की कोशिश की?
माइकइलियार

मेरा मतलब है कि CSS तत्व मान्यता प्राप्त है, लेकिन यह रेंडरिंग आउटपुट को प्रभावित नहीं करता है। 12.16 और 12.50 का परीक्षण किया। अन्य उत्तर मूल रूप से समान हैं: वे लाइन-ऊंचाई तत्व का उपयोग करने के लिए सभी TELL हैं!
2022 बजे user2284570

@user क्योंकि आप इसे कैसे करते हैं। मुझे लगता है कि यह एक ब्राउज़र बग या उस सीएसएस नियम के लिए समर्थन की कमी है। शायद एक अलग सवाल के रूप में पूछा जाना चाहिए।
माइकइलियार

निश्चित रूप से, वर्कअराउंड पूछना यहां विषय से अलग है ... जिस तरह से मैंने देखा है कि यह अन्य ब्राउज़रों के ब्रांडों को प्रभावित करता है: यह तब मौजूद होता है जब यह सेटिंग DOM के साथ सेट होती है या जब contenteditable = "true" मौजूद होता है।
13:22 बजे user2284570

12

आप सी-लाइन का उपयोग करके सीएसएस में अंतर-पैराग्राफ रिक्ति सेट नहीं कर सकते, <p>ब्लॉक के बीच रिक्ति । इसके बजाय इंट्रा-पैराग्राफ लाइन रिक्ति, एक <p>ब्लॉक के भीतर लाइनों के बीच का स्थान निर्धारित करता है । यही है, लाइन-ऊँचाई टाइपोग्राफर की इंटर-लाइन है जो पैराग्राफ के भीतर अग्रणी होती है जिसे लाइन-ऊँचाई द्वारा नियंत्रित किया जाता है।

मैं वर्तमान में 0.15em इंटर- <p>स्पेसिंग का उत्पादन करने के लिए CSS में किसी भी विधि के बारे में नहीं जानता हूं। चाहे वह किसी भी फॉन्ट प्रॉपर्टी पर em या rem वेरिएंट का उपयोग कर रहा हो। मुझे संदेह है कि यह अधिक जटिल फ्लोट्स या ऑफसेट के साथ किया जा सकता है। सीएसएस में यह आवश्यक है।


7
क्या आप अंतर- <p>अंतर के लिए उसके लिए मार्जिन का उपयोग नहीं कर सकते थे ?
फ्लिम्ड

4
कुछ मामलों में, margin-topऔर / या margin-bottomप्रभावी ढंग से पूरा कर सकते हैं कि यहाँ क्या वांछित है।
user1147171

10

आप गाढ़ा लाइनों चाहते हैं, आप के लिए एक ही मूल्य निर्धारित कर सकते हैं font-sizeऔरline-height

अपनी CSS फ़ाइल में

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

आपकी HTML फ़ाइल में

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> jsfiddle.net पर इस स्निपेट के साथ खेलें

तुम भी line-heightठीक लाइन रिक्ति नियंत्रण के लिए बढ़ा सकते हैं :

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}

9

इस संपत्ति की कोशिश करो

line-height:200%;

या

line-height:17px;

वृद्धि का उपयोग करें और वॉल्यूम कम करें


@AVD: यह प्रेस्टो आधारित ओपेरा में काम नहीं करता है। मुझे वर्कअराउंड की आवश्यकता है ... कृपया! : \
user2284570


4

line-heightसंपत्ति की कोशिश करो ; लाइन ऊँचाई निर्दिष्ट करने के कई तरीके हैं


1

हाँ, जैसा कि हर कोई कह रहा line-heightहै, बात है। किसी भी फ़ॉन्ट उपयोग कर रहे हैं, एक मध्य ऊंचाई चरित्र (एक तरह के रूप में या ■, नहीं ऊपरी माध्यम से जा रहा या कम) में एक ही ऊंचाई-लंबाई के साथ जाना चाहिए line-height: 0.6करने के लिए 0.65

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>


0

लाइनस्पेसिंग का उपयोग रिएक्ट नेटिव (या देशी मोबाइल ऐप) में किया जाता है।

वेब के लिए आप letterSpacing(या letter-spacing) का उपयोग कर सकते हैं

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.