टेक्स्ट स्पेसिंग से संबंधित CSS गुण

Articles

यह लेख टेक्स्ट स्पेसिंग से संबंधित CSS गुणों को समझाता है।

आप line-height और word-spacing जैसे गुणों के उपयोग और उन्हें लिखने का तरीका सीख सकते हैं।

YouTube Video

पूर्वावलोकन के लिए HTML बनाना

css-text-space.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

टाइपोग्राफी (टेक्स्ट मार्जिन-संबंधित)

`line-height` गुण

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height एक CSS गुण है जो पंक्ति रिक्ति (लाइन हाइट) सेट करने के लिए उपयोग किया जाता है। line-height लाइनों के बीच का लंबवत स्थान निर्दिष्ट करता है, जिसे पढ़ने की क्षमता और डिज़ाइन में रिक्ति समायोजित करने के लिए उपयोग किया जाता है।

`line-height` के मुख्य उपयोग

बिना इकाई की संख्याएँ

1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}

फॉन्ट आकार के सापेक्ष ऊंचाई निर्दिष्ट करें। उदाहरण के लिए, 1.5 निर्दिष्ट करने पर यह लाइन हाइट को फॉन्ट आकार के 1.5 गुना सेट कर देता है। यह विधि उत्तरदायी डिज़ाइन के लिए उपयोगी है।

प्रतिशत

1p {
2    line-height: 150%;
3}

लाइन हाइट को फॉन्ट आकार का प्रतिशत के रूप में निर्दिष्ट करें। उदाहरण के लिए, 150% निर्दिष्ट करने से लाइन हाइट फॉन्ट आकार के 150% पर सेट हो जाती है।

स्थिर मूल्य (px, em, rem, आदि)

1p {
2    line-height: 20px;
3}

लाइन हाइट को परम मानक इकाइयों में निर्दिष्ट करें। उदाहरण के लिए, आप 20px जैसी एक ठोस मान निर्दिष्ट कर सकते हैं, लेकिन यह उत्तरदायी डिज़ाइन में लचीलापन प्रदान नहीं करता है।

`normal`

1p {
2    line-height: normal;
3}

normal निर्दिष्ट करने से ब्राउज़र के डिफ़ॉल्ट लाइन स्पेसिंग सेटिंग्स लागू होती हैं। आमतौर पर, यह फॉन्ट आकार का लगभग 1.2 से 1.4 गुना होगा।

`line-height` का उपयोग करने के उदाहरण

पठनीय पैरा

पढ़ने की सुविधा के लिए आमतौर पर 1.5 से 1.6 के बीच की line-height अनुशंसित की जाती है। यदि लाइन स्पेसिंग बहुत संकरी है, तो टेक्स्ट भीड़भाड़ वाला और पढ़ने में कठिन होगा, और यदि यह बहुत चौड़ी है, तो टेक्स्ट असंगठित महसूस होगा।

शीर्षक डिज़ाइन

शीर्षकों और टाइटल्स के लिए, जहां टेक्स्ट बड़ा होता है, लाइन स्पेसिंग को कम किया जा सकता है। 1.1 या 1.2 जैसी सेटिंग्स का अक्सर उपयोग किया जाता है।

सारांश

line-height टेक्स्ट की पठनीयता और डिज़ाइन दोनों को सुधारने के लिए एक महत्वपूर्ण संपत्ति है।
सापेक्ष मानों (संख्याओं या प्रतिशतों) का उपयोग करने से उत्तरदायी डिज़ाइनों में अनुकूलन आसान हो जाता है।
बड़े टेक्स्ट वाले शीर्षकों और छोटे टेक्स्ट वाले अनुच्छेदों के लिए, प्रत्येक के लिए उपयुक्त लाइन स्पेसिंग सेट करना महत्वपूर्ण है।

इस गुण का उपयोग करके टेक्स्ट की उपस्थिति को अधिक पठनीय बनाया जा सकता है और इसकी डिज़ाइन गुणवत्ता को बढ़ाया जा सकता है।

`letter-spacing` गुण

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing एक CSS गुण है जिसका उपयोग अक्षरों के बीच की दूरी (लेटर स्पेसिंग) को समायोजित करने के लिए किया जाता है। इस गुण का उपयोग टेक्स्ट डिज़ाइन को सुव्यवस्थित करने, पठनीयता बढ़ाने और विशिष्ट शैलियों को प्राप्त करने के लिए किया जा सकता है।

इस उदाहरण में, इसे निम्नलिखित रूप में निर्दिष्ट किया गया है।

normal: डिफ़ॉल्ट अक्षर अंतराल। यह ब्राउज़र और फ़ॉन्ट द्वारा निर्धारित एक मानक मान है।
4px: विस्तृत अक्षर अंतराल का एक उदाहरण। हर अक्षर के बीच 4 पिक्सल का अंतराल जोड़ता है।
-1px: संकीर्ण अक्षर अंतराल का एक उदाहरण। हर अक्षर के बीच 1 पिक्सल का अंतराल कम करता है।

`लेटर-स्पेसिंग` का उपयोग कैसे करें

इकाईयों के साथ मान

1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}

सकारात्मक मान सेट करने से अक्षर अंतराल बढ़ जाएगा।
नकारात्मक मान सेट करने से अक्षर अंतराल कम हो जाएगा।
इकाइयां आमतौर पर px (पिक्सल) या em में होती हैं।

डिफ़ॉल्ट: `normal`

1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}

डिफ़ॉल्ट अक्षर-अंतर का उपयोग करें। आमतौर पर, फॉन्ट द्वारा निर्धारित मानक अक्षर-अंतर लागू किया जाता है।

`लेटर-स्पेसिंग` उपयोग के उदाहरण

बेहतर पठनीयता: छोटे फॉन्ट आकारों या अधिक संकुचित फॉन्ट्स के लिए, आप letter-spacing बढ़ाकर पठनीयता सुधार सकते हैं।
डिज़ाइन समायोजन: आप शीर्षक या लोगो जैसे डिज़ाइन तत्वों को दृष्टिगत रूप से उजागर करने के लिए अक्षर-अंतर को समायोजित कर सकते हैं।
शब्दों के बीच समायोजन: आप अक्षरों के स्तर पर अंतर को समायोजित कर सकते हैं, न कि शब्दों के बीच। letter-spacing अक्षर स्तर के अंतर को समायोजित करता है, लेकिन शब्दों के बीच का अंतर बढ़ाने के लिए word-spacing का उपयोग करें।
डिज़ाइन संतुलन: यदि आप अक्षर-अंतर को बहुत अधिक बढ़ाते हैं, तो पूरा पाठ बहुत फैला हुआ दिख सकता है। विपरीत रूप से, यदि इसे बहुत कम कर दिया जाता है, तो पाठ संकुचित हो सकता है और पढ़ना कठिन हो सकता है, इसलिए उचित संतुलन बनाए रखना महत्वपूर्ण है।

सारांश

letter-spacing एक गुण है जो अक्षरों के बीच का अंतर समायोजित करता है, डिज़ाइन और पठनीयता दोनों को प्रभावित करता है।
आप सकारात्मक मानों के साथ अंतर बढ़ा सकते हैं और नकारात्मक मानों के साथ इसे घटा सकते हैं।
यह शीर्षक और विशिष्ट डिज़ाइन तत्वों के लिए प्रभावी है, लेकिन सावधान रहें कि पठनीयता से समझौता न करें।

इस गुण का उपयोग करके, आप पाठ की उपस्थिति को समायोजित कर सकते हैं और आकर्षक डिज़ाइन प्राप्त कर सकते हैं।

`वर्ड-स्पेसिंग` प्रॉपर्टी

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing एक CSS गुण है जो पाठ में शब्दों के बीच के अंतर को नियंत्रित करता है। इस गुण का सही उपयोग दृश्य संतुलन और पाठ की पठनीयता को सुधार सकता है। word-spacing विशेष रूप से टाइपोग्राफी-केंद्रित डिज़ाइनों और उत्तरदायी डिज़ाइन परिदृश्यों में उपयोगी है।

इस उदाहरण में, इसे निम्नलिखित रूप में निर्दिष्ट किया गया है।

normal: डिफ़ॉल्ट शब्द-अंतर लागू करता है। यह ब्राउज़र का प्रारंभिक मान है।
4px: बढ़े हुए शब्द-अंतर का एक उदाहरण। प्रत्येक शब्द के बीच 4 पिक्सेल का अंतर जोड़ता है।
-1px: घटे हुए शब्द-अंतर का एक उदाहरण। प्रत्येक शब्द के बीच का अंतर 1 पिक्सेल से घटाता है।
word-and-letter-spacing: घटे हुए शब्द और अक्षर-अंतर का एक उदाहरण। सामान्य की तुलना में शब्दों के बीच का अंतर 0.1em से और अक्षरों के बीच का अंतर 0.05em से घटाता है।

सकारात्मक और नकारात्मक मानों का उपयोग करना

word-spacing के लिए सकारात्मक मान सेट करने पर शब्दों के बीच की रिक्ति बढ़ जाएगी। दूसरी ओर, नकारात्मक मानों का उपयोग शब्दों के बीच अंतराल को संकीर्ण करता है। नकारात्मक मानों का उपयोग दृश्य प्रभावों को प्रमुख बनाने या विशेष डिज़ाइन कारणों के लिए अक्षर अंतराल को कम करने में किया जा सकता है।

`letter-spacing` के साथ अंतर

word-spacing एक प्रॉपर्टी है जो शब्दों के बीच अंतराल को समायोजित करती है, जबकि letter-spacing अक्षरों के बीच अंतराल को समायोजित करती है। इन गुणों को मिलाकर, आप पूरे पाठ के टाइपोग्राफी पर अधिक सटीक नियंत्रण प्राप्त कर सकते हैं।

सावधानियाँ और सर्वोत्तम प्रथाएँ

अत्यधिक स्थान समायोजन: word-spacing के अत्यधिक उपयोग से पठनीयता में कमी आ सकती है। विशेष रूप से, बहुत बड़े या बहुत छोटे अंतराल उपयोगकर्ताओं के लिए तनावपूर्ण हो सकते हैं, इसलिए संतुलित समायोजन महत्वपूर्ण है।
उत्तरदायी डिज़ाइन: em या rem का उपयोग करके सापेक्ष मान निर्दिष्ट करना उत्तरदायी डिज़ाइन के लिए प्रभावी है क्योंकि यह विभिन्न स्क्रीन आकारों में उचित प्रदर्शन सुनिश्चित करता है।
हेडिंग शैली समायोजन: हेडिंग पाठ में शब्दों के बीच अंतराल को चौड़ा करके, आप दृश्य बल जोड़ सकते हैं। यह आपको सामग्री की पदानुक्रम को स्पष्ट करने और एक परिष्कृत डिज़ाइन प्राप्त करने की अनुमति देता है।

`word-break` गुण

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break एक CSS प्रॉपर्टी है जो इस बात को नियंत्रित करती है कि पाठ कंटेनर की चौड़ाई पार करने पर कैसे लपेटेगा। सामान्य रूप से, ब्राउज़र शब्द सीमाओं पर रेखाएं तोड़ते हैं, लेकिन विशिष्ट सेटिंग्स लंबे शब्दों या URLs की उपस्थिति में उपस्थिति और पठनीयता में सुधार कर सकती हैं।

आप word-break प्रॉपर्टी के लिए निम्नलिखित मान निर्दिष्ट कर सकते हैं।

normal

normal डिफ़ॉल्ट मान है। जब कोई शब्द कंटेनर की चौड़ाई पार करता है, तो यह शब्द सीमाओं पर टूटेगा। यह सेटिंग अंग्रेजी जैसी भाषाओं में सामान्य है, और शब्दों के बीच में टूटने की प्रक्रिया नहीं होती।
break-all

break-all एक सेटिंग है जहां किसी भी चरित्र के बाद आवश्यकतानुसार पंक्ति विराम डाले जा सकते हैं। विशेष रूप से जब लंबे शब्द या URLs शामिल होते हैं, तो लेआउट बाधित होने से रोकने के लिए पंक्ति विराम चरित्र स्तर पर होते हैं।
keep-all

keep-all एक सेटिंग है जो विशेष रूप से एशियाई भाषाओं (जैसे जापानी, चीनी, कोरियाई आदि) के लिए उपयोग की जाती है। इस सेटिंग में, पूरा शब्द संरक्षित होता है, और शब्दों के मध्य में कोई टूट नहीं होता। हालांकि, अंग्रेजी जैसी रिक्त स्थान से विभाजित भाषाओं के लिए सामान्य शब्द सीमा पंक्ति विराम लागू होते हैं।

यह उदाहरण तीन अलग-अलग word-break सेटिंग्स दिखाता है। word-break-normal के साथ, पूरा शब्द संरक्षित रहता है और यदि यह कंटेनर की चौड़ाई पार करता है तो यह शब्द सीमाओं पर टूटता है। word-break-break-all के साथ, शब्दों के बीच में भी टूटने की प्रक्रिया होती है। word-break-keep-all जापानी जैसी एशियाई भाषाओं के लिए स्वाभाविक विरामों की अनुमति देता है और अंग्रेजी के लिए शब्द सीमा विराम लागू करता है।

`word-break` आवेदन परिदृश्य

मोबाइल डिवाइस और उत्तरदायी डिज़ाइन

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

मोबाइल उपकरणों पर, स्क्रीन की चौड़ाई सीमित होती है, जिससे URLs या लंबे शब्दों सहित पाठ स्क्रीन की चौड़ाई पार कर सकता है। ऐसे मामलों में, word-break: break-all; लागू करने से चरित्र स्तर पर पंक्ति विराम की अनुमति मिलती है ताकि स्क्रीन की चौड़ाई में फिट हो सके और पठनीयता में सुधार हो सके।

`hyphens` संपत्ति

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

hyphens संपत्ति का उपयोग CSS में यह निर्धारित करने के लिए किया जाता है कि पाठ की पंक्तियों को तोड़ते समय शब्द विभाजन (शब्दों में हाइफ़न जोड़कर) कैसे संभाला जाए। इस संपत्ति को सही तरीके से सेट करके, आप पाठ की पठनीयता और स्वरूप में सुधार कर सकते हैं। लंबे शब्दों को लपेटने की आवश्यकता होने पर हाइफ़नेशन विशेष रूप से उपयोगी होता है।
चूंकि हाइफ़नेशन के नियम भाषा के अनुसार भिन्न होते हैं, यह संपत्ति पाठ के लोकेल पर निर्भर करती है।

सिंटैक्स (वाक्य रचना)

1element {
2    hyphens: none | manual | auto;
3}

hyphens संपत्ति को निम्नलिखित मानों पर सेट किया जा सकता है:।

none: कोई हाइफ़नेशन लागू नहीं होता। शब्द आमतौर पर केवल शब्द के अंत में टूटेंगे।
manual: हाइफ़नेशन को मैन्युअल रूप से लागू किया जाता है। इस स्थिति में, आपको HTML के भीतर मैन्युअल रूप से हाइफ़नेशन पॉइंट निर्दिष्ट करने होंगे। उदाहरण के लिए, आप  (सॉफ़्ट हाइफ़न) का उपयोग कर सकते हैं।
auto: ब्राउज़र स्वचालित रूप से उपयुक्त स्थानों पर हाइफ़नेशन लागू करता है। इस स्थिति में, दस्तावेज़ की भाषा (lang गुण) को सही ढंग से निर्दिष्ट किया जाना चाहिए।

नोट्स

भाषा सेटिंग्स का महत्व: जब hyphens: auto; का उपयोग किया जाता है, तो उचित हाइफ़नेशन के लिए HTML दस्तावेज़ के lang गुण को सही ढंग से सेट करना आवश्यक है।
फ़ॉन्ट निर्भरता: कुछ फ़ॉन्ट हाइफ़नेशन के लिए उपयुक्त नहीं हो सकते।
हाइफ़नेशन शब्दकोशों का उपयोग: हाइफ़नेशन नियम ब्राउज़र द्वारा उपयोग किए गए शब्दकोशों पर निर्भर करते हैं। इसलिए, यह कुछ भाषाओं के लिए अपेक्षित रूप से काम नहीं कर सकता।

सारांश

hyphens संपत्ति का सही इस्तेमाल करके, आप पाठ लेआउट को काफी हद तक सुधार सकते हैं। विशेष रूप से बहुभाषी वेबसाइटों और मोबाइल-अनुकूल डिज़ाइन के लिए, auto और manual का उपयुक्त उपयोग करके उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

टेक्स्ट से संबंधित CSS गुण कोड प्रदर्शन और उद्धरणों के लिए CSS गुण

टेक्स्ट स्पेसिंग से संबंधित CSS गुण

YouTube Video

पूर्वावलोकन के लिए HTML बनाना

टाइपोग्राफी (टेक्स्ट मार्जिन-संबंधित)

line-height गुण

line-height के मुख्य उपयोग

बिना इकाई की संख्याएँ

प्रतिशत

स्थिर मूल्य (px, em, rem, आदि)

normal

line-height का उपयोग करने के उदाहरण

पठनीय पैरा

शीर्षक डिज़ाइन

सारांश

letter-spacing गुण

लेटर-स्पेसिंग का उपयोग कैसे करें

इकाईयों के साथ मान

डिफ़ॉल्ट: normal

लेटर-स्पेसिंग उपयोग के उदाहरण

सारांश

वर्ड-स्पेसिंग प्रॉपर्टी

सकारात्मक और नकारात्मक मानों का उपयोग करना

letter-spacing के साथ अंतर

सावधानियाँ और सर्वोत्तम प्रथाएँ

word-break गुण

word-break आवेदन परिदृश्य

मोबाइल डिवाइस और उत्तरदायी डिज़ाइन

hyphens संपत्ति

सिंटैक्स (वाक्य रचना)

नोट्स

सारांश

YouTube Video

`line-height` गुण

`line-height` के मुख्य उपयोग

`normal`

`line-height` का उपयोग करने के उदाहरण

`letter-spacing` गुण

`लेटर-स्पेसिंग` का उपयोग कैसे करें

डिफ़ॉल्ट: `normal`

`लेटर-स्पेसिंग` उपयोग के उदाहरण

`वर्ड-स्पेसिंग` प्रॉपर्टी

`letter-spacing` के साथ अंतर

`word-break` गुण

`word-break` आवेदन परिदृश्य

`hyphens` संपत्ति