पहले लेआउट

block तत्वों को inline तत्वों से पहचानें और किसी तत्व को केंद्र में लाने की क्लासिक तकनीकें सीखें।

10 मिनट · 3 प्रश्न

बॉक्स पेज पर खुद को कैसे व्यवस्थित करते हैं? यह सब उनके display मोड पर निर्भर करता है, जिसे display property नियंत्रित करती है। एक block तत्व एक ईंट की तरह बर्ताव करता है: यह पूरी उपलब्ध चौड़ाई घेरता है और अगले तत्व को एक नई पंक्ति पर धकेल देता है। शीर्षक <h1>, अनुच्छेद <p> और <div> टैग (बिना किसी विशेष अर्थ वाले सामान्य बॉक्स) डिफ़ॉल्ट रूप से block होते हैं। एक inline तत्व किसी वाक्य में एक शब्द की तरह बर्ताव करता है: यह केवल अपनी सामग्री की जगह घेरता है और अपने पड़ोसियों के बगल में बैठता है। लिंक <a> और <span> टैग (<div> का inline समकक्ष) डिफ़ॉल्ट रूप से inline होते हैं।

<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>

display property आपको यह बर्ताव बदलने देती है: किसी लिंक पर display: block; उसे पूरी चौड़ाई घेरने पर मजबूर करता है, किसी <div> पर display: inline; उसे पाठ के भीतर बहने पर मजबूर करता है। inline तत्वों की एक महत्वपूर्ण सीमा से सावधान रहें: width और height properties उन पर अनदेखी कर दी जाती हैं। किसी तत्व का आकार तय करने के लिए, उसका block होना ज़रूरी है।

a {
  display: block;
  width: 200px;
  background-color: lightblue;
}

अब केंद्रित करने की बात, वह सवाल जो हर शुरुआती पूछता है। पहला मामला: किसी बॉक्स के भीतर पाठ को केंद्रित करना। text-align: center; property कंटेनर पर लागू होती है और उसकी inline सामग्री (पाठ, लिंक, चित्र) को केंद्रित करती है। दूसरा मामला: एक पूरे block बॉक्स को केंद्रित करना, जैसे पेज के बीच में एक कार्ड। क्लासिक तकनीक: बॉक्स को एक चौड़ाई दें, फिर margin: 0 auto; लिखें। auto मान ब्राउज़र से बाएं और दाएं हाशिये खुद निकालने को कहता है: यह उन्हें बराबर बना देता है, जो बॉक्स को केंद्रित करता है।

.card {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid gray;
  padding: 16px;
}

आइए संक्षेप में देखें कि आपने इस मॉड्यूल में क्या सीखा: आप जानते हैं कि किसी CSS फाइल को कैसे जोड़ते हैं, selectors, properties और values के साथ नियम कैसे लिखते हैं, तत्वों को टैग, class या id से कैसे निशाना बनाते हैं, padding, border और margin में संतुलन कैसे बिठाते हैं, पाठ को शैली कैसे देते हैं और, अब, बॉक्सों को कैसे व्यवस्थित और केंद्रित करते हैं। इन बुनियादी बातों के साथ, आप पहले से ही एक सरल, सुरुचिपूर्ण वेब पेज बना सकते हैं। अगला मॉड्यूल आपको अधिक शक्तिशाली लेआउट उपकरणों से परिचित कराएगा।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. किसी block तत्व और किसी inline तत्व के बीच क्या अंतर है?
   • एक block पाठ नहीं रख सकता, एक inline रख सकता है
   • एक block पूरी चौड़ाई घेरता है और एक नई पंक्ति शुरू करता है, एक inline पाठ के प्रवाह में रहता है
   • एक inline हमेशा एक block से बड़ा होता है
2. आप 300 px चौड़े किसी block बॉक्स को क्षैतिज रूप से कैसे केंद्रित करते हैं?
   • बॉक्स पर ही text-align: center;
   • एक निर्धारित चौड़ाई के साथ margin: 0 auto;
   • बॉक्स पर padding: auto;
3. डिफ़ॉल्ट रूप से width: 200px; किसी <span> पर कोई असर क्यों नहीं डालता?
   • क्योंकि span सभी CSS properties को अस्वीकार करते हैं
   • क्योंकि 200 px किसी span के अधिकतम आकार से ज़्यादा है
   • क्योंकि एक span inline है और inline तत्वों पर width अनदेखी कर दी जाती है