बॉक्स मॉडल से संबंधित CSS गुण

Articles

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

आप चौड़ाई, ऊँचाई और मार्जिन जैसे गुणों के उपयोग और सिंटैक्स के बारे में सीख सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-box.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>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

बॉक्स मॉडल संबंधित

`width` और `height` गुण

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

width और height गुण CSS गुण हैं जो किसी तत्व की चौड़ाई और ऊँचाई निर्धारित करने के लिए उपयोग किए जाते हैं। ये विशेष रूप से ब्लॉक तत्वों, छवियों, वीडियो आदि के आकार को सेट करने के लिए उपयोग किए जाते हैं।

width-height-fixed क्लास में, चौड़ाई और ऊँचाई के लिए निश्चित मान निर्दिष्ट किए गए हैं।
width-height-percent क्लास में, चौड़ाई और ऊँचाई के लिए प्रतिशत मान निर्दिष्ट किए गए हैं।

जिन मानों को निर्दिष्ट किया जा सकता है

width और height गुणों के निम्नलिखित मान हो सकते हैं।

auto: डिफ़ॉल्ट आकार। मूल तत्व के सापेक्ष आकार स्वतः समायोजित करता है।
स्थिर मान: पिक्सेल, प्रतिशत या सापेक्ष इकाइयों में एक निश्चित चौड़ाई निर्दिष्ट करता है।(ex: 100px, 50%, 10rem)
- उदाहरण के लिए, 250px तत्व का आकार 250 पिक्सल तक सेट करता है, और 50% इसे मूल तत्व के आकार का 50% सेट करता है।
min-content: सामग्री के न्यूनतम आकार के अनुसार फिट होता है।
max-content: सामग्री के अधिकतम आकार के अनुसार फिट होता है।
fit-content: सामग्री के आकार के आधार पर तत्व का आकार उचित रूप से समायोजित करता है।

न्यूनतम और अधिकतम मान निर्दिष्ट करना

min-width, max-width, min-height, और max-height CSS गुण हैं जो किसी तत्व की चौड़ाई और ऊँचाई के संबंध में आकार की सीमाएँ सेट करने के लिए उपयोग किए जाते हैं। इनके उपयोग से, आप यह सुनिश्चित कर सकते हैं कि कोई तत्व एक विशिष्ट आकार सीमा के भीतर रहे।

`margin` और `padding` गुण

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin और padding वे गुण हैं जो CSS में बॉक्स मॉडल के भीतर तत्वों के बाहरी और आंतरिक स्थान को नियंत्रित करने के लिए उपयोग किए जाते हैं। ये तत्वों के बीच के स्थान को समायोजित करने और उनकी उपस्थिति को व्यवस्थित करने के लिए उपयोग किए जाते हैं।

margin-padding क्लास में, margin और padding दोनों निर्दिष्ट किए जाते हैं। मजबूत सीमा के बाहर margin स्थान और सीमा के अंदर padding स्थान होता है।
margin-only क्लास में, केवल margin निर्दिष्ट किया जाता है। आप देख सकते हैं कि margin-padding क्लास की तुलना में नीला क्षेत्र छोटा है क्योंकि मजबूत सीमा के अंदर कोई padding स्थान नहीं है।
no-margin क्लास में, margin और padding दोनों को 0 पर सेट किया गया है। आप देख सकते हैं कि नीला क्षेत्र पूरी तरह से बाईं ओर धकेला गया है क्योंकि मजबूत सीमा के बाहर कोई margin स्थान नहीं है।

इस प्रकार, margin गुण तत्व के बाहरी स्थान को सेट करता है, तत्वों के बीच की दूरी को समायोजित करता है। दूसरी ओर, padding गुण तत्व के आंतरिक स्थान को सेट करता है, सामग्री और सीमा के बीच की दूरी को समायोजित करता है।

`margin` गुण

margin गुण तत्व के बाहरी स्थान (margin) को सेट करता है। यह आसन्न तत्वों के बीच स्थान बनाने के लिए उपयोग किया जाता है। निम्नलिखित मान निर्दिष्ट किए जा सकते हैं:।
स्थिर मान: आप margin का आकार पिक्सेल, सापेक्ष इकाइयों (em, rem), या प्रतिशत में निर्दिष्ट कर सकते हैं।(ex: 10px, 1em, 5%)
auto: ब्लॉक तत्वों को केंद्रित करने के लिए उपयोगी। जब चौड़ाई निर्दिष्ट की जाती है, तो यह स्वतः बाएँ और दाएँ मार्जिन को समायोजित करता है।
सकारात्मक और नकारात्मक मान: सकारात्मक मान स्थान को बढ़ाते हैं, जबकि नकारात्मक मान तत्वों को पास लाते हैं।

संक्षेप नोटेशन:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

margin गुण एक से चार मानों तक ले सकता है।

एक मान: सभी पक्षों पर लागू होता है।
दो मान: पहला ऊपर और नीचे पर लागू होता है, दूसरा बाएँ और दाएँ पर।
तीन मान: शीर्ष, बाएँ और दाएँ, नीचे के क्रम में लागू होता है।
चार मान: शीर्ष, दायां, नीचे, बायां के क्रम में लागू होता है।

`padding` संपत्ति

कार्य:

padding संपत्ति एक तत्व का आंतरिक स्थान (पैडिंग) निर्धारित करती है। इसे सामग्री और तत्व की सीमा के बीच स्थान बनाने के लिए उपयोग किया जाता है। निम्नलिखित मान निर्दिष्ट किए जा सकते हैं:।
स्थिर मान: पैडिंग के आकार को निर्दिष्ट करता है।(ex: 10px, 1em, 5%)
नकारात्मक मानों का उपयोग नहीं किया जा सकता। पैडिंग मान केवल सकारात्मक संख्याओं के रूप में निर्दिष्ट किए जा सकते हैं।

संक्षेप नोटेशन:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

margin की तरह, आप एक से चार मान निर्दिष्ट कर सकते हैं।

एक मान: सभी पक्षों पर लागू होता है।
दो मान: पहला ऊपर और नीचे पर लागू होता है, दूसरा बाएँ और दाएँ पर।
तीन मान: शीर्ष, बाएँ और दाएँ, नीचे के क्रम में लागू होता है।
चार मान: शीर्ष, दायां, नीचे, बायां के क्रम में लागू होता है।

`box-sizing` संपत्ति

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing एक CSS संपत्ति है जो यह नियंत्रित करती है कि किसी तत्व की चौड़ाई और ऊंचाई कैसे गणना की जाती है।

content-box वर्ग में, तत्व की चौड़ाई 360px है। width 300px है, जिसमें बायीं और दायीं padding का कुल योग 40px है और बायीं और दायीं border का कुल योग 20px है, जिससे कुल 360px बनता है।
border-box में, तत्व की चौड़ाई 300px है। निर्दिष्ट width में padding और border शामिल हैं।

`box-sizing` के मान

box-sizing के मुख्यतः दो मान होते हैं: content-box और border-box, जिसमें content-box डिफ़ॉल्ट मान है।

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

जब content-box निर्दिष्ट किया जाता है, तो केवल सामग्री की चौड़ाई और ऊँचाई को width और height द्वारा निर्धारित किया जाता है। अंतिम आकार निर्धारित करने के लिए इसमें padding और border जोड़े जाते हैं। अन्य शब्दों में, width और height केवल सामग्री क्षेत्र को संदर्भित करते हैं।

इस उदाहरण में, निर्दिष्ट width 200px है, लेकिन बायीं और दायीं padding तथा border की चौड़ाई जोड़कर तत्व की अंतिम वास्तविक चौड़ाई 260px है।

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

जब border-box निर्दिष्ट किया जाता है, तो width और height की गणना padding और border सहित की जाती है। अन्य शब्दों में, निर्दिष्ट width और height सामग्री, padding, और border का कुल आकार बन जाता है।

इस मामले में, निर्दिष्ट width 200px है, और चूंकि padding और border भी शामिल हैं, तत्व की अंतिम वास्तविक चौड़ाई 200px बनी रहती है। padding और border को इसके भीतर समायोजित किया जाता है।

`box-sizing` के अंतरों का सारांश।

गुण	गणना विधि	वास्तविक चौड़ाई गणना।
`content-box` (डिफ़ॉल्ट)	`width` केवल सामग्री को संदर्भित करता है। `padding` और `border` जोड़े जाते हैं।	`width` + `padding` + `border`
`border-box`	`width` सब कुछ है (सामग्री, `padding`, `border` शामिल है)	निर्दिष्ट `width` को जैसे का तैसा उपयोग किया जाता है।

`box-sizing` के लाभ।

border-box का उपयोग लेआउट को स्थिर करता है। padding या border जोड़ने से निर्दिष्ट आकार नहीं बदलता है, जिससे गणनाएं सरल हो जाती हैं।
यह लचीले लेआउट बनाने में उपयोगी है। उत्तरदायी डिज़ाइन या जटिल लेआउट में अप्रत्याशित आकार उतार-चढ़ाव से बचने के लिए अक्सर border-box का उपयोग किया जाता है।

`border-box` को वैश्विक रूप से लागू करने का तरीका।

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

CSS को इस तरह सेट करके, आप सभी तत्वों पर border-box लागू कर सकते हैं और अप्रत्याशित आकार परिवर्तनों से बच सकते हैं।

सारांश

box-sizing नियंत्रित करता है कि क्या padding और border को किसी तत्व की width और height में शामिल किया जाए।
border-box का उपयोग आकार गणनाओं को आसान बनाता है और उत्तरदायी डिज़ाइन के लिए उपयुक्त है।

`visibility` गुण।

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

visibility गुण का उपयोग तत्वों को दिखाने या छिपाने के लिए किया जाता है, लेकिन display गुण के विपरीत, यह लेआउट को प्रभावित करता है, भले ही तत्व छिपा हुआ हो। यह केवल तत्व को छिपाता है, उसकी मूल स्थिति और आकार को बनाए रखता है, बिना अन्य तत्वों के लेआउट को प्रभावित किए।

मूल वाक्यविन्यास

1element {
2    visibility: value;
3}

value: एक मान जो तत्व की दृश्यता को निर्दिष्ट करता है।

मान प्रकार।

visibility गुण को निम्न मानों पर सेट किया जा सकता है।

`visible`

visible निर्दिष्ट करने से तत्व प्रदर्शित होगा। यह डिफ़ॉल्ट मान है।

`hidden`

hidden को निर्दिष्ट करने से तत्व छिप जाएगा, लेकिन इसका लेआउट स्थान सुरक्षित रहेगा।

`collapse`

collapse का उपयोग मुख्य रूप से टेबल की पंक्तियों या स्तंभों के लिए किया जाता है। तत्व अदृश्य हो जाता है और इसकी जगह भी अनदेखी कर दी जाती है। जब टेबल की पंक्तियों या स्तंभों पर लागू किया जाता है, तो छिपी हुई पंक्तियां या स्तंभ पूरी तरह से लेआउट से हटा दिए जाते हैं।
हालांकि, जब टेबल तत्वों को छोड़कर सामान्य ब्लॉक या इनलाइन तत्वों पर उपयोग किया जाता है, तो यह hidden की तरह व्यवहार करता है और लेआउट स्थान संरक्षित रहता है।

`inherit`

inherit निर्दिष्ट करने पर यह पैरेंट तत्व से visibility गुण का मान प्राप्त करेगा।

`visibility` और `display` के बीच के अंतर।

visibility और display के बीच निम्नलिखित अंतर हैं।

visibility: hidden तत्व को छिपा देता है लेकिन इसकी जगह और लेआउट को बनाए रखता है।
display: none तत्व को पूरी तरह से लेआउट से हटा देता है, जिससे अन्य तत्व उस स्थान को भर सकते हैं।

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

YouTube Video

कोड प्रदर्शन और उद्धरणों के लिए CSS गुण पृष्ठभूमि-संबंधित CSS गुण

बॉक्स मॉडल से संबंधित CSS गुण

YouTube Video

प्रीव्यू के लिए HTML

बॉक्स मॉडल संबंधित

width और height गुण

जिन मानों को निर्दिष्ट किया जा सकता है

न्यूनतम और अधिकतम मान निर्दिष्ट करना

margin और padding गुण

margin गुण

संक्षेप नोटेशन:

padding संपत्ति

कार्य:

संक्षेप नोटेशन:

box-sizing संपत्ति

box-sizing के मान

content-box

border-box

box-sizing के अंतरों का सारांश।

box-sizing के लाभ।

border-box को वैश्विक रूप से लागू करने का तरीका।

सारांश

visibility गुण।

मूल वाक्यविन्यास

मान प्रकार।

visible

hidden

collapse

inherit

visibility और display के बीच के अंतर।

YouTube Video

`width` और `height` गुण

`margin` और `padding` गुण

`margin` गुण

`padding` संपत्ति

`box-sizing` संपत्ति

`box-sizing` के मान

`content-box`

`border-box`

`box-sizing` के अंतरों का सारांश।

`box-sizing` के लाभ।

`border-box` को वैश्विक रूप से लागू करने का तरीका।

`visibility` गुण।

`visible`

`hidden`

`collapse`

`inherit`

`visibility` और `display` के बीच के अंतर।