👩🏼 👩🏿‍✈️ 👊🏼 [बुकमार्क] सीएसएस: इंडेंटेशन और इंडेंटेशन का उपयोग करना 🧖🏽 🙅🏼 🐂

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

सीएसएस दूरी प्रकार

तत्वों और उनके भागों के बीच की दूरी, सीएसएस द्वारा अनुकूलन, दो प्रकार के होते हैं। वे, तत्व के संबंध में, आंतरिक और बाहरी में विभाजित हैं। कल्पना कीजिए कि हमारे पास एक तत्व है। यदि इसके अंदर इसके कुछ हिस्सों के बीच एक निश्चित दूरी है, तो यह एक आंतरिक संकेत है। अगर हम व्यक्तिगत तत्वों के बीच की दूरी के बारे में बात कर रहे हैं - यह बाहरी संकेत है।

आंतरिक स्थान और बाहरी स्थान

CSS में, तत्वों और उनके घटकों के बीच की दूरी को निम्नानुसार समायोजित किया जा सकता है:

.element {
    padding: 1rem;
    margin-bottom: 1rem;
}

संपत्ति का paddingउपयोग यहां इंडेंटेशन को समायोजित करने के लिए किया जाता है, और संपत्ति marginका उपयोग इंडेंटेशन को कॉन्फ़िगर करने के लिए किया जाता है। सब कुछ बहुत सरल है। सत्य? यदि आप कई छोटे भागों और बच्चों वाले घटकों के साथ काम करते हैं तो सीएसएस में दूरी को समायोजित करना बहुत जटिल हो सकता है।

Gin मार्जिन संपत्ति - इंडेंट

संपत्ति का marginउपयोग व्यक्तिगत तत्वों के बीच की दूरी निर्धारित करने के लिए किया जाता है। उदाहरण के लिए, पिछले उदाहरण ने सीएसएस संपत्ति margin-bottom: 1remका उपयोग दूसरे के ऊपर स्थित दो तत्वों के बीच ऊर्ध्वाधर दूरी को जोड़ने के लिए किया था ।

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

Outer बाहरी पैडिंग को संक्षिप्त करें

यदि हम सरल शब्दों में "बाहरी मार्जिन के पतन" की अवधारणा का वर्णन करते हैं, तो हम कह सकते हैं कि ऐसा तब होता है जब एक के ऊपर एक स्थित दो तत्वों में बाहरी मार्जिन होता है, और उनमें से एक का इंडेंट दूसरे के इंडेंट से बड़ा होता है। इस मामले में, एक बड़े इंडेंट का उपयोग किया जाएगा, और छोटे को अनदेखा किया जाएगा।

अधिक इंडेंटेशन जीतता है।

उपरोक्त आरेख में, संपत्ति ऊपरी तत्व औरmargin-bottomनिम्न परसंपत्ति को कॉन्फ़िगर किया गया हैmargin-top। तत्वों के बीच ऊर्ध्वाधर दूरी इन इंडेंट के बड़े से मेल खाती है।

इस समस्या से बचने के लिए, सभी तत्वों में समान इंडेंटेशन को कॉन्फ़िगर करने की सिफारिश की जाती है (जैसा कि यहां वर्णित है )। और यहाँ एक और दिलचस्प तथ्य है। CSS ट्रिक्स संसाधन ने गुणों के उपयोग पर मतदान कियाmargin-bottomऔरmargin-top। जैसा कि यह निकला, संपत्तिmargin-bottomने 61% वोट लिया।

इस समस्या को हल करने का तरीका यहां दिया गया है:

.element:not(:last-child) {
    margin-bottom: 1rem;
}

सीएसएस चयनकर्ता का उपयोग करना :notतत्वों के बीच अनावश्यक स्थान से छुटकारा पाने के लिए पिछले बच्चे के बाहरी इंडेंट को निकालना आसान बनाता है।

→ यहाँ बाहरी मार्जिन के साथ काम करने का एक डेमो दिया गया है। बाहरी मार्जिन

को ढहने से संबंधित एक और उदाहरण बच्चे और माता-पिता के तत्वों से संबंधित है। मान लें कि आपके पास निम्न HTML है:

<div class="parent">
  <div class="child">I'm the child element</div>
</div>

यहाँ उनकी शैली हैं:

.parent {
  margin: 50px auto 0 auto;
  width: 400px;
  height: 120px;
}

.child {
  margin: 50px 0;
}

यहाँ यह देखने का क्या परिणाम है कि यह सब दिखता है।

बच्चे और माता-पिता

ध्यान दें कि बच्चा माता-पिता के शीर्ष के खिलाफ रहता है। यह उनके बाहरी मार्जिन के पतन का परिणाम है। W3C के अनुसार, इस समस्या को हल करने के लिए कई विकल्प हैं:

borderमूल तत्व में एक संपत्ति जोड़ना ।
displayबाल तत्व की संपत्ति को एक मूल्य पर सेट करना inline-block।

इस समस्या का एक और समझने योग्य समाधान padding-topमूल तत्व की संपत्ति को निर्धारित करना होगा ।

मूल तत्व का शीर्ष इंडेंट सेट करना

Ative नकारात्मक संकेत

एक नकारात्मक मूल्य किसी भी बाहरी खरोज के लिए इस्तेमाल किया जा सकता है। कुछ मामलों में, यह तकनीक बहुत उपयोगी है। निम्नलिखित आकृति पर एक नज़र डालें।

मूल तत्व

की पैडिंग प्रॉपर्टी सेट करने के परिणाम मूल तत्व में एक गुण होता हैpadding: 1rem। यह बच्चे को ऊपर, बाएं और दाएं से ऑफसेट करने का कारण बनता है। लेकिन बच्चे को माता-पिता की सीमाओं से सटे होना चाहिए। नकारात्मक बाहरी मार्जिन इसे प्राप्त करने में मदद करेंगे।

.parent {
    padding: 1rem
}

.child {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
}

इस तरह की शैलीकरण के परिणामस्वरूप ऐसा ही हुआ।

बच्चे के नकारात्मक बाहरी मार्जिन से वांछित प्रभाव प्राप्त करने में मदद मिलती है

→ यहां एक प्रदर्शन है

यदि आप नकारात्मक बाहरी मार्जिन के विषय में रुचि रखते हैं, तो मैं इस लेख कीसलाह देता हूं।

▍पेडिंग प्रॉपर्टी - इनर पैडिंग

जैसा कि पहले ही उल्लेख किया गया है, संपत्ति paddingआपको तत्व के अंदर अंतरिक्ष को नियंत्रित करने की अनुमति देती है। इस संपत्ति को लागू करने का उद्देश्य उस स्थिति पर निर्भर करता है जिसमें इसका उपयोग किया जाता है।

उदाहरण के लिए, इसका उपयोग लिंक के चारों ओर स्थान बढ़ाने के लिए किया जा सकता है। यह क्लिक करने योग्य लिंक स्थान में वृद्धि की ओर जाता है ।

हरे रंग में प्रस्तुत

▍ ऐसी स्थितियाँ जिनमें पैडिंग प्रॉपर्टी काम नहीं करती है

यह ध्यान रखना महत्वपूर्ण है कि ऊर्ध्वाधर इंडेंटेशन उन तत्वों के साथ काम नहीं करता है जिनके पास संपत्ति है display: inline। उदाहरण के लिए, ये तत्व हैं <span>और <a>। यदि आप paddingऐसे तत्व की संपत्ति को कॉन्फ़िगर करते हैं , तो इस तत्व पर ऐसी सेटिंग काम नहीं करेगी। यह सिर्फ एक अनुकूल अनुस्मारक है कि इनलाइन तत्वों को संपत्ति बदलने की आवश्यकता है display:

.element span {
    display: inline-block;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

सीएसएस ग्रिड लेआउट तत्वों के बीच का स्थान

CSS ग्रिड में, आप संपत्ति का उपयोग करके कॉलम और पंक्तियों के बीच की दूरी को आसानी से समायोजित कर सकते हैं grid-gap। यह एक संपत्ति के लिए एक संक्षिप्त नाम है जो स्तंभों और पंक्तियों के बीच की दूरी को परिभाषित करता है।

स्तंभों और पंक्तियों के बीच की दूरी

.element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px; /*    16px     */
}

इन संपत्तियों का पूरा रिकॉर्ड इस तरह दिखता है:

.element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 24px;
    grid-column-gap: 16px;
}

फ्लेक्सबॉक्स लेआउट के सीएसएस तत्वों के बीच का स्थान

ग्रिड और फ्लेक्सबॉक्स लेआउट के लिए सुझाई गई एक संपत्ति है। यह एक संपत्ति है gap। वर्तमान में, केवल फ़ायरफ़ॉक्स ही इसका समर्थन करता है ।

.element {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

इसके अलावा, इस संपत्ति का उपयोग सीएसएस के साथ यह निर्धारित करने के लिए नहीं किया जा सकता@supports है कि क्या यह समर्थित है, और इसके आधार पर उचित निर्णय लेने के लिए। यदि आपको यह संपत्ति पसंद है - तो इसे क्रोम में जोड़ने के लिए वोट करें ।

CSS में पोजिशनिंग एलिमेंट्स

शायद तत्वों की स्थिति को सीधे उनके बीच की दूरी को समायोजित करने के तरीकों के लिए जिम्मेदार नहीं ठहराया जा सकता है, लेकिन कुछ मामलों में, स्थिति एक भूमिका निभाती है। उदाहरण के लिए, यदि कोई पूर्णतया अवस्थित बाल तत्व है जिसे 16pxमूल तत्व के बाएँ और ऊपरी किनारों पर स्थित होना चाहिए ।

निम्नलिखित उदाहरण पर विचार करें। एक कार्ड है जिस पर एक आइकन है जिसे मूल तत्व के शीर्ष और बाएं किनारों से कुछ दूरी पर रखा जाना है। इस प्रभाव को प्राप्त करने के लिए, आप निम्नलिखित शैली का उपयोग कर सकते हैं:

.category {
    position: absolute;
    left: 16px;
    top: 16px;
}

माता-पिता और बच्चे के तत्वों की सीमाओं के बीच की दूरी को हरे रंग में हाइलाइट किया गया है।

परिदृश्य और केस स्टडी का उपयोग करें

इस खंड में, हम तत्वों के बीच की दूरी को समायोजित करने के लिए साधनों का उपयोग करने के लिए परिदृश्यों को देखेंगे। कुछ इसी तरह से सीएसएस के साथ आपके दैनिक काम में अच्छी तरह से आ सकता है।

Component हैडर घटक

एक घटक एक हेडर है जिसमें निम्नलिखित सेटिंग्स हैं: बाएं और दाएं मार्जिन, लोगो के चारों ओर अंतरिक्ष, नेविगेशन तत्व के आसपास का स्थान, नेविगेशन तत्व और उपयोगकर्ता नाम के बीच की दूरी

। इस मामले में, हेडर घटक में एक लोगो, नेविगेशन क्षेत्र और एक क्षेत्र होता है जिसमें जानकारी प्रदर्शित होती है। उपयोगकर्ता प्रोफ़ाइल के बारे में। क्या आप अनुमान लगा सकते हैं कि इस तरह के तत्व का शैलीकरण कोड कैसा दिखना चाहिए? यहाँ, इसे आसान बनाने के लिए, ऐसे तत्व का एक योजनाबद्ध मार्कअप:

<header class="c-header">
  <h1 class="c-logo"><a href="#">Logo</a></h1>
  <div class="c-header__nav">
    <nav class="c-nav">
      <ul>
        <li><a href="#">...</a></li>
      </ul>
    </nav>
    <a href="#" class="c-user">
      <span>Ahmad</span>
      <img class="c-avatar" src="shadeed.jpg" alt="">
    </a>
  </div>
</header>

आंतरिक और बाहरी मार्जिन

बाएं और दाएं मार्जिन का उपयोग किया जाता है। उनका उद्देश्य यह सुनिश्चित करना है कि हेडर की सामग्री इसके किनारों से न चिपके।

.c-header {
    padding-left: 16px;
    padding-right: 16px;
}

नेविगेशन लिंक स्थापित करते समय, किसी को इस तथ्य को ध्यान में रखना चाहिए कि उनमें से प्रत्येक को ऊर्ध्वाधर और क्षैतिज रूप से पर्याप्त आंतरिक स्थान होना चाहिए। इसके कारण, उनका क्लिक करने योग्य क्षेत्र काफी बड़ा होगा, जो परियोजना की पहुंच में सुधार करेगा ।

.c-nav a {
    display: block;
    padding: 16px 8px;
}

अगर हम तत्वों के बीच की दूरी के बारे में बात करते हैं, तो आप संपत्ति का उपयोग कर सकते marginहैं, या - आप की संपत्ति को बदल सकते हैं displayतत्वों <li>को inline-block। इस वजह से, इस तरह के तत्वों को प्रतीकों के रूप में माना जाता है, इस तथ्य के कारण एक ही स्तर पर एक छोटे से स्थान को जोड़ा जाता है।

.c-nav li {
    /*     ,     */
    display: inline-block;
}

अंत में, उपयोगकर्ता नाम और अवतार में एक बाहरी बाहरी इंडेंट होता है।

.c-user img,
.c-user span {
    margin-left: 10px;
}

कृपया ध्यान दें कि यदि आप एक बहुभाषी वेबसाइट बना रहे हैं, तो इस स्थिति में तार्किक CSS गुणों का उपयोग करने की अनुशंसा की जाती है :

.c-user img,
.c-user span {
    margin-inline-start: 1rem;
}

विभाजक के पहले और बाद की दूरी समान नहीं हैं।

ध्यान दें कि विभाजक से पहले और बाद की दूरी समान नहीं हैं। इसका कारण यह है कि नेविगेशन ब्लॉक की चौड़ाई निर्धारित नहीं है। इसके बजाय, केवल आंतरिक संकेत यहां कॉन्फ़िगर किए गए हैं। नतीजतन, नेविगेशन तत्वों की चौड़ाई उनकी सामग्री पर निर्भर करती है। इस समस्या के समाधान यहां दिए गए हैं:

नेविगेशन आइटम के लिए न्यूनतम चौड़ाई निर्धारित करना।
क्षैतिज इंडेंटेशन बढ़ाएं।
विभाजक के बाईं ओर एक अतिरिक्त इंडेंट जोड़ता है।

सबसे अच्छा और आसान तरीका तीसरी विधि का उपयोग करना है, जो संपत्ति को कॉन्फ़िगर करना है margin-left:

.c-user {
    margin-left: 8px;
}

→ यहाँ एक डेमो है

ग्रिड लेआउट में गड़बड़ी - सीएसएस फ्लेक्सबॉक्स

ग्रिड लेआउट वह जगह है जहां तत्वों के बीच की दूरी को समायोजित करने के लिए प्रौद्योगिकियों का अक्सर उपयोग किया जाता है। निम्नलिखित उदाहरण पर विचार करें।

ग्रिड लेआउट

हमें तालिका की पंक्तियों और स्तंभों के बीच की दूरी को समायोजित करने की आवश्यकता है। ये है मार्कअप:

<div class="wrapper">
    <div class="grid grid--4">
        <div class="grid__item">
              <article class="card"><!--   --></article>
        </div>
        <div class="grid__item">
              <article class="card"><!--   --></article>
        </div>
        <!--   .. -->
    </div>
</div>

मैं आमतौर पर घटकों को एक संक्षिप्त स्थिति में रखना पसंद करता हूं और उनके बाहरी इंडेंट स्थापित करने से बचता हूं। इस कारण से, मेरे पास एक तत्व grid_itemहै जिसमें कार्ड तत्व स्थित होगा।

.grid--4 {
    display: flex;
    flex-wrap: wrap;
}

.grid__item {
    flex-basis: 25%;
    margin-bottom: 16px;
}

इस सीएसएस कोड के लिए धन्यवाद, प्रत्येक पंक्ति में चार कार्ड होंगे। यहाँ उनके बीच की दूरी को समायोजित करने का एक संभावित तरीका है:

.grid__item {
    flex-basis: calc(25% - 10px);
    margin-left: 10px;
    margin-bottom: 16px;
}

CSS फ़ंक्शन का उपयोग करके, calc()इंडेंटेशन को घटाया जाता है flex-basis। जैसा कि आप देख सकते हैं, यह इतना सरल समाधान नहीं है। मैं वास्तव में निम्नलिखित को पसंद करता हूं:

ग्रिड आइटम की संपत्ति सेट करें padding-left।
मूल तत्व को margin-lefty के समान मान के साथ ऋणात्मक बाहरी मार्जिन सेट करें padding-left।

मैंने इस विधि के बारे में कई साल पहले सीखा था, यहाँ कुछ लेख पढ़ने के बाद , जिसका नाम पहले से ही भूल गया है (यदि आप जानते हैं कि किस तरह का लेख है - तो कृपया मुझे बताएं)।

.grid--4 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
}

.grid__item {
    flex-basis: 25%;
    padding-left: 10px;
    margin-bottom: 16px;
}

जिस कारण से मैंने यहां के लिए एक नकारात्मक मूल्य का उपयोग किया margin-leftहै, क्योंकि पहले कार्ड में एक संपत्ति padding-leftहै, जो वास्तव में, आवश्यक नहीं है। नतीजतन, मैं रैपर तत्व को बाईं ओर ले जाता हूं और अनावश्यक स्थान से छुटकारा पाता हूं।

→ यहाँ एक कार्यशील उदाहरण दिया गया है।

एक अन्य समान विचार यह है कि इंडेंटेशन और नकारात्मक इंडेंटेशन का उपयोग किया जाए। यहाँ फेसबुक साइट से एक उदाहरण है।

आंतरिक और बाहरी मार्जिन

यहां इस विचार को दर्शाने वाला CSS कोड है:

.wrapper {
    margin-left: -4px;
    margin-right: -4px;
}

.story {
    padding-left: 4px;
    padding-right: 4px;
}

ग्रिड लेआउट में idDistance - सीएसएस ग्रिड

और अब - सबसे अच्छा हिस्सा! CSS ग्रिड-आधारित लेआउट में, संपत्ति के उपयोग को समायोजित करने के लिए तत्वों के बीच की दूरी बहुत सुविधाजनक है grid-gap। इसके अलावा, आप तत्वों की चौड़ाई और निचली बाहरी सीमाओं के बारे में चिंता नहीं कर सकते। CSS ग्रिड लेआउट इस सब का ध्यान रखता है।

.grid--4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

बस इतना ही। मेरा मानना है कि कोई भी यह तर्क नहीं देगा कि फ्लेक्सबॉक्स लेआउट स्थापित करने की तुलना में ग्रिड लेआउट स्थापित करना आसान और अधिक समझ में आता है।

Only आवश्यक होने पर ही तत्वों के बीच दूरी तय करना

ग्रिड लेआउट में, मैं वास्तव में इस तथ्य को पसंद करता हूं कि संपत्ति grid-gapकेवल तभी लागू होती है जब तत्वों के बीच कुछ दूरी होनी चाहिए। निम्नलिखित लेआउट पर एक नज़र डालें।

ग्रिड का लेआउट जिसमें मोबाइल वातावरण में तत्वों को लंबवत रूप से व्यवस्थित किया जाता है, और डेस्कटॉप में - क्षैतिज रूप से।

दो कार्ड के साथ साइट का एक खंड होता है। मुझे उन्हें एक मोबाइल वातावरण में, कार्ड की एक ऊर्ध्वाधर व्यवस्था के साथ, और एक डेस्कटॉप में, उनकी क्षैतिज व्यवस्था के साथ अलग करने की आवश्यकता है। सीएसएस ग्रिड के बिना, ऐसे लेआउट लचीलेपन को प्राप्त करना असंभव है। निम्नलिखित कोड पर एक नज़र डालें:

.card:not(:last-child) {
    margin-bottom: 16px;
}

@media (min-width: 700px) {
    .card:not(:last-child) {
        margin-bottom: 0;
        margin-left: 1rem;
    }
}

बहुत सुविधाजनक नहीं है। सत्य? अगली शैली के बारे में क्या?

.card-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 700px) {
    .card-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

हो गया है! और सब कुछ बहुत सरल है।

नीचे के बाहरी इंडेंटेशन के साथ bottomWork

मान लीजिए कि हमारे पास निम्नलिखित घटक हैं जो एक के ऊपर एक स्थित हैं। उनमें से प्रत्येक के पास कम बाहरी इंडेंट है।

घटकों के एक सेट ने क्षैतिज रूप से व्यवस्थित किया

ध्यान दें कि अंतिम तत्व के लिए एक निचला बाहरी मार्जिन है। और यह गलत है, क्योंकि इंडेंट केवल तत्वों के बीच मौजूद होना चाहिए।

आप इस समाधान का सहारा लेकर इस समस्या को ठीक कर सकते हैं जिसका हम अब विश्लेषण करेंगे।

समाधान # 1: सीएसएस चयनकर्ता: नहीं

.element:not(:last-child) {
    margin-bottom: 16px;
}

समाधान नंबर 2: समान स्तर के पड़ोसी तत्वों का संयोजन

.element + .element {
    margin-top: 16px;
}

निर्णय विश्लेषण

यद्यपि समाधान # 1 अधिक आकर्षक लगता है, इसके निम्न नुकसान हैं:

यह सीएसएस विशिष्ट मुद्दों की ओर जाता है। जब तक चयनकर्ता का उपयोग नहीं किया जाता है तब तक इसे फिर से परिभाषित नहीं किया जा सकता है :not।
यह तब लागू नहीं होता है जब वस्तुओं के एक से अधिक कॉलम होते हैं। यह नीचे सचित्र है।

तत्वों के दो कॉलम और समाधान नंबर 1 की समस्या

यदि हम समाधान नंबर 2 के बारे में बात करते हैं, तो इसके आवेदन से विशिष्टता के साथ समस्याएं नहीं होती हैं। सच है, यह समाधान केवल उन मामलों में भी उपयुक्त है जब तत्वों का एक एकल स्तंभ आता है।

इस स्थिति में, मूल तत्व के लिए एक नकारात्मक बाहरी इंडेंटेशन जोड़कर अनावश्यक स्थान को हटाने के निर्णय का सहारा लेना सबसे अच्छा है:

.wrapper {
    margin-bottom: -16px;
}

यहाँ निम्नलिखित होता है। इस सेटिंग के लिए धन्यवाद, तत्व को निर्दिष्ट बाहरी इंडेंटेशन के बराबर दूरी से नीचे की ओर स्थानांतरित किया जाता है। लेकिन यहां आपको सावधान रहना चाहिए कि ऐसे बाहरी इंडेंट को सेट न करें, जिसके उपयोग से तत्व ओवरलैप हो जाएंगे।

Card घटक कार्ड

अब मैं घटक कार्ड की सेटिंग्स के बारे में विस्तार से चर्चा करना चाहता हूं। शायद अंत में मुझे इसके बारे में एक पूरी किताब मिल जाएगी। यहां मैं कार्ड को कॉन्फ़िगर करने के लिए एक सार्वभौमिक पैटर्न पर विचार करूंगा और उन्हें प्रबंधित करने के तरीके के बारे में बात करूंगा।

घटक कार्ड (यदि आपको खाने का मन करता है - मुझे क्षमा करें)

इस कार्ड में तत्वों और उनके भागों के बीच की दूरी का उपयोग करने के बारे में सोचें। यहाँ इस सवाल का जवाब है।

आंतरिक और बाहरी मार्जिन

यहां मार्कअप है:

<article class="card">
    <a href="#">
      <div class="card__thumb"><img src="food.jpg" alt=""></div>
      <div class="card__content">
        <h3 class="card__title">Cinnamon Rolls</font></h3>
        <p class="card__author">Chef Ahmad</p>
        <div class="card__rating"><span>4.9</span></div>
        <div class="card__meta"><!-- --></div>
      </div>
    </a>
</article>

यहाँ वर्ग शैली है card__content:

.card__content {
    padding: 10px;
}

यहां सेट इंडेंटेशन के लिए धन्यवाद, सभी बच्चों के लिए ऑफसेट सेट किए जाएंगे। फिर बाहरी मार्जिन सेट करें:

.card__title,
.card__author,
.card__rating {
  margin-bottom: 10px;
}

रेटिंग और सूचना के पृथक्करण को स्थापित करते समय, मैंने सीमा का उपयोग किया:

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
}

लेकिन यहाँ हम एक समस्या का सामना कर रहे हैं! सीमा किनारों से बंधी नहीं है, जो कक्षा के साथ मूल तत्व के card__contentइंडेंटेशन के कारण है ।

विभाजक किनारे से बंधा नहीं है।

आप, शायद, पहले से ही अनुमान लगा चुके हैं कि नकारात्मक संकेत यहां हमारी मदद करेंगे:

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

लेकिन यहां फिर से, कुछ गलत हो गया। अब पाठ कार्ड के किनारे पर चिपक गया है।

विभाजक सामान्य है, लेकिन कार्ड की सामग्री सही ढंग से स्थित नहीं है।

इस समस्या को हल करने के लिए, आपको कार्ड की सामग्री के लिए बाएं और दाएं इंडेंट को कॉन्फ़िगर करने की आवश्यकता है।

.card__meta {
    padding: 10px 10px 0 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

कार्ड कॉन्फ़िगर किया गया है जैसा कि यह होना चाहिए

→ यहाँ एक उदाहरण है

Articles लेख की सामग्री

मुझे यकीन है कि हम यहां जिस बारे में बात करने जा रहे हैं वह बहुत ही सामान्य स्थिति है। यहां मुद्दा यह है कि आमतौर पर लेखों की सामग्री सीएमएस (सामग्री प्रबंधन प्रणाली - सामग्री प्रबंधन प्रणाली) से पृष्ठों पर जाती है, या स्वचालित रूप से मार्कडाउन फ़ाइलों के आधार पर उत्पन्न होती है। आप यहां तत्व वर्ग निर्दिष्ट नहीं कर सकते।

निम्नलिखित उदाहरण पर विचार करें, जो शीर्षकों, पैराग्राफ और चित्रों के मिश्रण वाले मार्कअप को दर्शाता है।

<div class="wrapper">
  <h1>Spacing Elements in CSS</h1>
  <p><!-- content --></p>
  <h2><font color="#3AC1EF">Types of Spacing</font></h2>
  <img src="spacing-1.png" alt="">
  <p><!-- content --></p> 
  <p><!-- content --></p> 
  <h2><font color="#3AC1EF">Use Cases</font></h2>
  <p><!-- content --></p> 
  <h3><font color="#3AC1EF">▍Card Component</font></h3> 
  <img src="use-case-card-2.png" alt="">
</div>

यह सब एक सभ्य रूप में लाने के लिए, तत्वों के बीच की दूरी एक समान होनी चाहिए और जिम्मेदारी से उपयोग किया जाना चाहिए। इस उदाहरण पर काम करते हुए, मैंने type-scale.com से कुछ शैलियों को उधार लिया ।

h1, h2, h3, h4, h5 {
  margin: 2.75rem 0 1.05rem;
}

h1 {
  margin-top: 0;
}

img {
  margin-bottom: 0.5rem;
}

यहाँ लेख के पाठ के साथ पृष्ठ का आरेख है।

पृष्ठ लेआउट और मार्जिन-टॉप और मार्जिन-नीचे के गुणों का अनुप्रयोग

यदि किसी तत्व का<p>शीर्षक, उदाहरण के लिए, एक शीर्षक द्वारा अनुसरण किया जाता हैTypes of Spacing, तोmargin-bottomतत्वकी संपत्ति को<p>अनदेखा किया जाएगा। यह, जैसा कि आप अनुमान लगा सकते हैं, बाहरी मार्जिन के पतन का एक परिणाम है।

→ यहाँ एक उदाहरण है

Ation बाहरी इंडेंटेशन, जैसा लागू हो

निम्नलिखित लेआउट पर एक नज़र डालें।

सामान्य स्थिति में और अंतरिक्ष से बाहर भागने की स्थिति में

तत्व बहुत अच्छे नहीं लगते हैं जब वे एक-दूसरे के बहुत करीब होते हैं। मैंने यह लेआउट Flexbox का उपयोग करके बनाया है। इस तकनीक को "एलाइनमेंट शिफ्टिंग रैपिंग" कहा जाता है। मुझे यहां से उसके नाम के बारे में पता चला।

.element {
    display: flex;
    flex-wrap: wrap;
}

इस तकनीक को लागू करने के परिणामस्वरूप, देखने की जगह एक निश्चित सीमा से कम होने पर लाइन रैपिंग की जाती है। यहाँ है कि यह कैसा दिखता है।

बाल तत्व नई लाइनों पर हैं।

यहां आपको एक मध्यवर्ती स्थिति से निपटने की आवश्यकता है जिसमें दो तत्व अभी भी एक दूसरे के बगल में हैं, लेकिन उनके बीच की दूरी शून्य है। इस मामले में, मैं संपत्ति का सहारा लेना पसंद करता हूंmargin-right, जो तत्वों को एक-दूसरे को छूने से रोकता है और प्रतिक्रिया को गति देता हैflex-wrap।

तत्व एक दूसरे को स्पर्श नहीं करते हैं

▍CSS संपत्ति लेखन-विधा

सबसे पहले हम एमडीएन को उद्धृत करते हैं : "संपत्ति writing-modeपाठ की क्षैतिज या ऊर्ध्वाधर स्थिति, साथ ही साथ ब्लॉक दिशा भी सेट करती है।"

क्या आपने कभी सोचा है कि बाहरी तत्वों का उपयोग कैसे किया जाना चाहिए जब वे एक तत्व के साथ उपयोग किए जाते हैं जिनकी संपत्ति writing-modeमानक से अलग है? निम्नलिखित उदाहरण पर विचार करें।

वर्टिकल हैडर वाला कार्ड।

यहां स्टाइल हैं:

.wrapper {
    /*              */
    display: flex;
}

.title {
    writing-mode: vertical-lr;
    margin-right: 16px;
}

हेडर को 90 डिग्री घुमाया जाता है। इसके और छवि के बीच एक खाली जगह होनी चाहिए। जैसा कि यह निकला, संपत्ति संपत्ति margin-rightके विभिन्न मूल्यों के साथ खुद को पूरी तरह से दिखाती है writing-mode।

→ यहाँ एक उदाहरण है।

मेरा मानना है कि हमने पर्याप्त इंडेंटेशन परिदृश्यों को कवर किया है। अब कुछ दिलचस्प अवधारणाओं पर विचार करें।

घटक एनकैप्सुलेशन

बड़े डिजाइन सिस्टम में कई घटक होते हैं। क्या उनके बाहरी मार्जिन को समायोजित करना तर्कसंगत होगा?

निम्नलिखित उदाहरण पर विचार करें।

बटन

<button class="button">Save Changes</button>
<button class="button button-outline">Discard</button>

मुझे बटन के बीच की दूरी को समायोजित करने की आवश्यकता कहां है? क्या मुझे बाएं या दाएं बटन के कुछ गुणों को कॉन्फ़िगर करने की आवश्यकता है? शायद आप समान स्तर के पड़ोसी तत्वों के संयोजन का उपयोग कर सकते हैं?

.button + .button {
    margin-left: 1rem;
}

इसके बारे में कुछ भी अच्छा नहीं है। यदि केवल एक बटन है तो क्या होगा? और यह मोबाइल डिवाइस पर कैसे काम करेगा, उस स्थिति में जब बटन लंबवत स्थित होते हैं, और क्षैतिज रूप से नहीं? सामान्य तौर पर, यहां हमें कई कठिन सवालों का सामना करना पड़ता है।

सार घटकों का उपयोग करना

उपरोक्त समस्याओं का हल अमूर्त घटकों का उपयोग है, जो उनमें अन्य घटकों को रखने के लिए उपयोग किया जाता है। यह, जैसा कि यहां कहा गया है , मूल तत्व के लिए पैडिंग को प्रबंधित करने के लिए जिम्मेदारी में थोड़ा बदलाव है। हम इस विचार के प्रकाश में पिछले उदाहरण पर पुनर्विचार करते हैं।

माता-पिता और बच्चे के घटक

<div class="list">
    <div class="list__item">
        <button class="button">Save Changes</button>
    </div>
    <div class="list__item">
        <button class="button button-outline">Discard</button>
    </div>
</div>

कृपया ध्यान दें कि आवरण तत्व हैं। प्रत्येक बटन का अपना आवरण होता है।

.list {
    display: flex;
    align-items: center;
    margin-left: -1rem; /*       */
}

.list__item {
    margin-left: 1rem;
}

बस इतना ही! और क्या अधिक है, यह अवधारणा किसी भी जावास्क्रिप्ट ढांचे पर लागू करना आसान है। उदाहरण के लिए:

<List>
  <Button>Save Changes</Button>
  <Button outline>Discard</Button>
</List>

और प्रयुक्त जेएस टूल को प्रत्येक तत्व को अपने आवरण में रखना चाहिए।

घटक विभाजक के रूप में प्रयुक्त

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

कल्पना करें कि साइट के एक निश्चित भाग में आपको आकार के बाएं बाहरी इंडेंट की आवश्यकता है 24px। उसी समय, निम्नलिखित आवश्यकताओं को इंडेंटेशन के लिए आगे रखा जाता है:

बाहरी इंडेंटेशन को सीधे घटक पर कॉन्फ़िगर नहीं किया जाना चाहिए, क्योंकि यह पहले से निर्मित डिज़ाइन सिस्टम का हिस्सा है।
इंडेंटेशन लचीला होना चाहिए। एक पृष्ठ पर इसका एक आकार हो सकता है X, और दूसरे पर - एक आकार Y।

मैंने पहली बार नए फेसबुक डिज़ाइन की खोज करते समय इस ट्रिक को देखा ।

फेसबुक डिज़ाइन विभाजक तत्व

यहाँ<div>इनलाइन शैली के साथएक विभाजक तत्व के रूप में उपयोग किया जाता हैwidth: 16px। इसका एकमात्र उद्देश्य वाम तत्व और कंटेनर तत्व के बीच खाली स्थान जोड़ना है।

यहाँ इस प्रतिक्रिया प्रशिक्षण मैनुअलसे एक उद्धरण है: "लेकिन वास्तविक दुनिया में, हमें घटकों के बाहर रिक्त स्थान की आवश्यकता होती है ताकि घटकों को पृष्ठों और दृश्यों में व्यवस्थित किया जा सके। यह यहां है कि बाहरी इंडेंटेशन की सेटिंग घटक कोड में घटकों के बीच की दूरी को समायोजित करने के लिए अपना रास्ता बनाते हैं जब उन्हें इकट्ठा किया जाता है।

मैं इस से सहमत हूँ। एक बड़े डिजाइन सिस्टम में, घटकों के लिए इंडेंटेशन जोड़ना तर्कहीन होगा। यह एक अच्छा-दिखने वाला कोड नहीं होगा।

▍ सेपरेटर घटक समस्याएँ

अब जब आपने अपने आप को विभाजक घटकों के विचार से परिचित कर लिया है, तो आइए उन कुछ समस्याओं के बारे में बात करते हैं जो उनके साथ काम करने के दौरान होने वाली हैं। यहां मैं उन सवालों के बारे में सोच रहा हूं:

पैरेंट घटक में एक विभाजक घटक कैसे जगह लेता है? वह क्षैतिज और ऊर्ध्वाधर लेआउट में कैसे व्यवहार करता है? उदाहरण के लिए, इस तरह के एक घटक अलग-अलग घटकों को लंबवत और क्षैतिज रूप से कैसे करेगा?
क्या मुझे displayमूल घटक (फ्लेक्सबॉक्स, ग्रिड) की संपत्ति के आधार पर इन घटकों को स्टाइल करने की आवश्यकता है ?

आइए हम इन सवालों की जांच करें।

विभाजक घटकों का आकार

आप एक अलग घटक बना सकते हैं जो विभिन्न मापदंडों को स्वीकार करता है। मैं एक जावास्क्रिप्ट डेवलपर नहीं हूं, लेकिन मुझे लगता है कि इसे "प्रॉपर" कहा जाता है। निम्नलिखित उदाहरण पर विचार करें, यहां से लिया गया है ।

के बीच स्थित एक विभाजक घटक है Headerऔर Section।

<Header />
<Spacer mb={4} />
<Section />

और यहां थोड़ी अलग स्थिति है। यहां, विभाजक का उपयोग लोगो (घटक Logo) और घटकों द्वारा दर्शाए गए नेविगेशन क्षेत्र के बीच स्वचालित रूप से समायोज्य दूरी बनाने के लिए किया जाता है Link।

<Flex>
  <Logo />
  <Spacer m="auto" />
  <Link>Beep</Link>
  <Link>Boop</Link>
</Flex>

ऐसा प्रतीत हो सकता है कि सीएसएस का उपयोग करके इस तरह के विभाजक को लागू करना बहुत सरल है, और यह डिजाइन का उपयोग करने के लिए पर्याप्त है justify-content: space-between। लेकिन क्या होगा अगर आपको डिज़ाइन बदलने की आवश्यकता है? इस मामले में, आपको स्टाइलाइजेशन को बदलना होगा।

निम्नलिखित उदाहरण पर एक नज़र डालें। क्या यह कोड लचीला दिखता है?

<Flex>
  <Logo />
  <Link>Beep</Link>
  <Link>Boop</Link>
  <Spacer m="auto" />
  <Link>Boop</Link>
</Flex>

ऐसे में स्टाइलाइजेशन को बदलने की जरूरत है।

आकार के संदर्भ में, हम कह सकते हैं कि विभाजक का आकार मूल तत्व के आकार के आधार पर समायोजित किया जा सकता है। उपरोक्त मामले में, growसीएसएस में मूल्य के लिए सेट की गई संपत्ति बनाने के लिए समझ में आ सकता है flex-grow: 1।

<Flex>
  <Spacer grow="1" />
</Flex>

छद्म तत्वों का उपयोग

एक और विचार जो मेरे दिमाग में आया, वह है विभाजकों को बनाने के लिए छद्म तत्वों का उपयोग करना।

.element:after {
    content: "";
    display: block;
    height: 32px;
}

शायद हमारे पास छद्म तत्व को विभाजक बनाने का अवसर है, और इसके लिए अलग तत्व का उपयोग नहीं करना चाहिए? उदाहरण के लिए:

<Header spacer="below" type="pseudo" length="32">
  <Logo />
  <Link>Home</Link>
  <Link>About</Link>
  <Link>Contact</Link>
</Header>

अब तक, मैंने अपनी परियोजनाओं में विभाजक घटकों का उपयोग नहीं किया है। लेकिन मैं उन परिदृश्यों की तलाश कर रहा हूं जिनमें वे मेरे लिए उपयोगी हो सकते हैं।

CSS गणित फ़ंक्शन मिन (), अधिकतम (), क्लैंप ()

क्या इंडेंटेशन गतिशील हो सकता है? उदाहरण के लिए, क्या इस तरह के एक इंडेंटेशन का उपयोग करना संभव है, जिसका न्यूनतम और अधिकतम आकार देखने के क्षेत्र की चौड़ाई पर निर्भर करता है? मैं इस प्रश्न का उत्तर सकारात्मक रूप से दे सकता हूं। CANIUse डेटा के अनुसार सीएसएस फ़ंक्शन, सभी प्रमुख ब्राउज़रों द्वारा समर्थित हैं।

ग्रिड लेआउट को याद करें और इस बारे में बात करें कि उनमें गतिशील इंडेंटेशन का उपयोग कैसे किया जा सकता है।

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: min(2vmax, 32px);
}

निर्माण का min(2vmax, 32px)अर्थ निम्न है: एक समान दूरी का उपयोग 2vmaxकरें लेकिन पार नहीं करना 32px।

→ यहाँ इस तरह के एक लेआउट का वीडियो प्रदर्शन है

→ यहाँ एक उदाहरण है।

ऐसा लचीलापन वास्तव में आश्चर्यजनक है। यह हमें वेब पेजों के गतिशील और लचीले लेआउट बनाने के कई अवसर प्रदान करता है।

सारांश

इस लेख में, हमने CSS का उपयोग करके वेब पेजों के तत्वों के बीच की दूरी को समायोजित करने की विशेषताओं की जांच की और तत्वों के आंतरिक स्थान के प्रबंधन के बारे में बात की। हम आशा करते हैं कि आपने आज जो सीखा है, वह आपको उपयोगी लगेगा।

प्रिय पाठकों! वेब पेज एलिमेंट्स के बीच की दूरी को एडजस्ट करने के लिए आप किन टूल्स का सबसे ज्यादा इस्तेमाल करते हैं?

[बुकमार्क] सीएसएस: इंडेंटेशन और इंडेंटेशन का उपयोग करना