वेबसाइट या ब्लॉग बनाते समय अक्सर ब्लॉक लेआउट का उपयोग किया जाता है। इसके परिणामस्वरूप, ब्लॉकों को इंडेंट करना अक्सर आवश्यक होता है। इस कारण से, के बारे में CSS में इंडेंट कैसे करेंइस पाठ में विस्तार से वर्णित है। ब्राउज़र के लिए, प्रत्येक टैग एक कंटेनर है जिसमें सामग्री, पैडिंग, बाहरी मार्जिन और एक सीमा होती है। इस पाठ में हम सीखेंगे कि आंतरिक और बाहरी इंडेंट कैसे बनाएं, और उनके मुख्य मापदंडों पर विचार करें।
नीचे दिया गया चित्र स्पष्ट रूप से ब्लॉक इंडेंट पैरामीटर दिखाता है:
जैसा कि आप देख सकते हैं, इंडेंट चार दिशाओं में बनाया जा सकता है: शीर्ष इंडेंट (ऊपर), निचला इंडेंट (नीचे), बायां इंडेंट (बाएं) और दायां इंडेंट (दाएं)। माप की इकाइयाँ पिक्सेल, प्रतिशत और अन्य सीएसएस इकाइयाँ हो सकती हैं - उनके बारे में और जानें। यह ट्यूटोरियल पिक्सेल का उपयोग करता है।
ब्लॉक पैडिंग
सीएसएस में पैडिंग के लिए जिम्मेदार संपत्ति है गद्दी. तो, आइए किसी ब्लॉक के लिए आंतरिक पैडिंग सेट करने का एक उदाहरण देखें:
पैडिंग-टॉप: 5px; /*शीर्ष पैडिंग*/ पैडिंग-बाएं: 8px; /*बाएं पैडिंग*/ पैडिंग-दाएं: 8px; /*दायाँ पैडिंग*/ पैडिंग-बॉटम: 5px; /*नीचे पैडिंग*/
इस उदाहरण में, ब्लॉक के प्रत्येक पक्ष के लिए पैडिंग अलग से सेट की गई है। इसके अलावा, CSS में इंडेंटेशन सेट करने के कई तरीके हैं:
मार्जिन: 5px 8px 5px 8px; /*ऊपर, दाएँ, नीचे, बाएँ मार्जिन*/ मार्जिन: 5px 8px 5px; /*ऊपर, बाएँ, दाएँ, निचले मार्जिन का वर्णन करता है*/ मार्जिन: 5px 8px; /*ऊपर और नीचे, दाएं और बाएं मार्जिन का वर्णन करता है*/ मार्जिन: 7px; /*सभी 7px पैडिंग का वर्णन करता है*/
पहली और आखिरी विधि को याद रखना आसान है। पहले मामले में, इंडेंट को दक्षिणावर्त (ऊपर, दाएं, नीचे, बाएं) रखा जाता है - हम बाद वाले मामले में इंडेंटेशन की कोई भी मात्रा निर्दिष्ट कर सकते हैं, सभी तरफ इंडेंट समान होंगे;
मार्जिन ब्लॉक करें
सीएसएस में मार्जिन के लिए जिम्मेदार संपत्ति है अंतर. सीएसएस में मार्जिन के उदाहरण:
मार्जिन-टॉप: 5px; /*शीर्ष मार्जिन*/ मार्जिन-बाएं: 10px; /*बायाँ हाशिया*/मार्जिन-दायाँ: 10px; /*दायां मार्जिन*/ मार्जिन-बॉटम: 5px; /*नीचे में मार्जिन*/
पैडिंग: 5px 10px 5px 10px; /*ऊपर, दाएँ, नीचे, बाएँ मार्जिन*/ पैडिंग: 5px 10px 5px; /*ऊपर, बाएँ और दाएँ, नीचे की पैडिंग का वर्णन करता है*/ पैडिंग: 5px 10px; /*ऊपर और नीचे, दाएं और बाएं पैडिंग का वर्णन करता है*/ पैडिंग: 7px; /*सभी 7px मार्जिन का वर्णन करता है*/
इस प्रकार, CSS में इंडेंट कैसे करें- प्रश्न कठिन नहीं है, लेकिन बहुत प्रासंगिक है। ऊपर वर्णित जानकारी को बेहतर ढंग से समझने के लिए, आपको याद रखना चाहिए कि दो गुण हैं: पैडिंग - आंतरिक इंडेंट और मार्जिन - बाहरी इंडेंट। इसके अलावा, जैसा कि आप पहले से ही जानते हैं, इंडेंट सेट करने के कई तरीके हैं, आप उनका उपयोग कर सकते हैं।
मेरे ब्लॉग पर स्वागत है। सीएसएस (कैस्केडिंग स्टाइल शीट्स) बहुत सारे अनुकूलन विकल्प प्रदान करता है उपस्थितिवेब पृष्ठ। आज मैं संक्षेप में बताना चाहूंगा कि सीएसएस में किसी भी तत्व के लिए शीर्ष पर या किसी अन्य तरफ पैडिंग को कैसे परिभाषित किया जाए।
अंतर
मार्जिन मार्जिन प्रॉपर्टी का उपयोग करके सेट किया गया है। इसकी मदद से, आप एक साथ सभी चार तरफ मार्जिन सेट कर सकते हैं, या अन्य गुणों का उपयोग कर सकते हैं: मार्जिन-टॉप, मार्जिन-लेफ्ट, मार्जिन-राइट, मार्जिन-बॉटम, जो आपको इसे केवल एक तरफ बनाने की अनुमति देता है।
मार्जिन उस दूरी को निर्धारित करता है जो किसी तत्व का चयनित किनारा पृष्ठ पर अन्य तत्वों से ऑफसेट होगा। उदाहरण के लिए, प्रविष्टि:
पी,डिव(
मार्जिन-टॉप: 20px;
}
इसका मतलब यह है कि सभी ब्लॉक और पैराग्राफ को शीर्ष पर 20 पिक्सेल से इंडेंट किया जाएगा, यानी, उनके शीर्ष किनारे को इस दूरी से आसन्न तत्वों से दूर ले जाया जाएगा।
केवल एक मार्जिन प्रॉपर्टी का उपयोग करके प्रत्येक तरफ मार्जिन लिखा जा सकता है, जिसमें एक पंक्ति में 4 मान लिखे जाते हैं:
डिव(
मार्जिन: 20px 10px 20px 10px;
}
पैडिंग क्रमशः ऊपर, दाएं, नीचे और बाएं किनारों से दी जाएगी। चूँकि इस मामले में वे विपरीत दिशाओं में बराबर हैं, हम इसे इस प्रकार भी लिख सकते हैं:
डिव(
मार्जिन: 20px 10px;
}
पहला मान ऊपर और नीचे का मार्जिन है, और दूसरा किनारों पर मार्जिन है।
खरोज
आंतरिक पैडिंग अलग तरीके से काम करती है - यह ब्लॉक को अन्य तत्वों से दूर नहीं ले जाती है, बल्कि तत्व के अंदर उस स्थान को जोड़ती है, ब्लॉक की सामग्री को उसके किनारों से दूर ले जाती है। यह आरामदायक है। आपने ऐसी वेबसाइट कहां देखी है जहां टेक्स्ट विंडो के सबसे ऊपर बाईं ओर शुरू होता है?
मैंने इसे नहीं देखा है, क्योंकि वेब डेवलपर टेक्स्ट को यथासंभव पढ़ने में आसान बनाने के लिए हमेशा बाहरी और आंतरिक इंडेंट का उपयोग करते हैं। आंतरिक पैडिंग को पैडिंग प्रॉपर्टी का उपयोग करके निर्दिष्ट किया जाता है, जिसमें सभी किनारों के लिए क्रमशः 4 मानों को एक स्थान से अलग करके सूचीबद्ध किया जा सकता है।
इसके अलावा, मार्जिन की तरह, आप साइड का नाम जोड़ सकते हैं और केवल उसके लिए दूरी निर्धारित कर सकते हैं। उदाहरण के लिए, टॉप पैडिंग को पैडिंग-टॉप का उपयोग करके लिखा जा सकता है। सामान्य तौर पर, पैडिंग प्रॉपर्टी मार्जिन प्रॉपर्टी के समान ही काम करती है।
उदाहरण के लिए, आप कोड का यह टुकड़ा दे सकते हैं:
अवरोध पैदा करना(
चौड़ाई: 200px;
पैडिंग: 20px;
}
आपको क्या लगता है हमारे तत्व की वास्तविक चौड़ाई क्या होगी? यहां आप देख सकते हैं कि यह 200 पिक्सल है, लेकिन पैडिंग प्रत्येक तरफ 20 और जोड़ते हैं, कुल मिलाकर 240 पिक्सल। डिज़ाइन करते समय इसे ध्यान में रखें।
मैं यह भी नोट करना चाहूंगा कि पैडिंग आम तौर पर केवल ब्लॉक तत्वों को दी जाती है, इसे इनलाइन तत्वों को न देना बेहतर है। मार्जिन किसी भी तत्व के साथ ठीक काम करता है।
किसी वेब पेज पर तत्वों को अधिक खूबसूरती से प्रदर्शित करने के लिए, सीएसएस में बाहरी और आंतरिक मार्जिन का उपयोग किया जाता है, और अब हम उदाहरणों का उपयोग करके इसे देखेंगे।
प्रत्येक तत्व, चाहे वह पैराग्राफ हो, डिव हो, छवि हो या वीडियो हो, एक ब्लॉक है जिसे पैडिंग प्रॉपर्टी का उपयोग करके अंदर और मार्जिन का उपयोग करके बाहर इंडेंट किया जा सकता है।
सीएसएस में इंडेंटेशन के लिए इन गुणों को इस प्रकार लिखा जाता है (एक पैराग्राफ को उदाहरण के रूप में लिया जाता है):
पी टैग के बजाय, आप निश्चित रूप से अपना स्वयं का तत्व लिखेंगे, जिसके लिए इंडेंटेशन लागू किया जाएगा।
यह समझना और याद रखना अनिवार्य है कि मार्जिन और पैडिंग मापदंडों के लिए, प्रत्येक पक्ष के लिए इंडेंट का निर्माण समान है।
अर्थात्, हमारे पास प्रत्येक इंडेंट में 4 मान हैं:
इंडेंट मान.
- पहला मान:शीर्ष गद्दी;
- दूसरा अर्थ:सही इंडेंटेशन;
- तीसरा अर्थ:निचला इंडेंट;
- चौथा अर्थ:बायां इंडेंट.
इस उदाहरण में, मैंने सीएसएस में मार्जिन बाहरी इंडेंट इस तरह से बनाया: मैंने शीर्ष पर 20px, बाएं और दाएं पर 10px लिखा (आमतौर पर वे समरूपता के लिए समान सेट होते हैं), और नीचे 30px लिखा।
और पैडिंग के लिए मैंने निर्दिष्ट किया: शीर्ष पर 10px, बाएँ और दाएँ, और नीचे 14px।
मार्जिन और पैडिंग गुणों में इंडेंट का मूल्य कम किया जा सकता है, बशर्ते कि वे समान आकार के हों।
मेरे उदाहरण से, संक्षिप्त संकेतन इस तरह दिखेगा:
अर्थात्, जब अंतिम संख्यात्मक प्रविष्टि गायब होती है, तो इस मामले में बाएं इंडेंट के लिए, ब्राउज़र स्वचालित रूप से बाएं इंडेंट के लिए दाईं ओर के मान के समान मान को प्रतिस्थापित कर देता है।
और मेरे मामले में, दाएँ और बाएँ मार्जिन मार्जिन और पैडिंग दोनों में 10px होगा।
और यदि आपके पास ऊपर और नीचे के मार्जिन के लिए समान मान हैं (उदाहरण के लिए: 16px), और बाएं और दाएं पर मार्जिन के लिए भी समान मान हैं (उदाहरण के लिए: 20px), तो प्रविष्टि होगी इसका और भी अधिक संक्षिप्त रूप है:
तदनुसार आंतरिक गद्दी के लिए सीएसएस प्रविष्टिइसी के समान किया गया।
एकल इंडेंट का अनुप्रयोग: प्रत्येक पक्ष के लिए अलग से।
किसी व्यक्तिगत इंडेंट को निर्दिष्ट करने के लिए निम्नलिखित एकल-मूल्य गुणों का उपयोग किया जाता है:
प्रत्येक पक्ष के लिए इंडेंट गुण।
- मार्जिन-टॉप: 3px; बाहरी शीर्ष मार्जिन;
- मार्जिन-बाएँ: 4px; बाहरी-बाएँ हाशिया;
- मार्जिन-राइट: 6px; बाहरी दायाँ हाशिया;
- मार्जिन-बॉटम: 10px; बाहरी निचला मार्जिन.
आंतरिक इंडेंट के लिए प्रविष्टियाँ उसी तरह लिखी जाती हैं, केवल आपको मार्जिन को पैडिंग से बदलने की आवश्यकता होती है।
उदाहरण के लिए, सभी img छवियों के लिए आपके पास पहले से ही CSS में लिखे गए सभी इंडेंट हैं।
यानी (स्पष्ट करने के लिए) बाहरी मार्जिन में निम्नलिखित मान हैं: शीर्ष पर 10px, बाएँ और दाएँ पर 20px, और नीचे 14px।
और आंतरिक पैडिंग चारों तरफ 6px है।
मान लीजिए कि आप पृष्ठ पर एक और तस्वीर डालने का निर्णय लेते हैं, लेकिन इसके लिए आप शीर्ष पर केवल बाहरी मार्जिन बदलना चाहते हैं, और बाकी को वैसे ही छोड़ देना चाहते हैं। और इस कार्य को पूरा करने के लिए, इस छवि के लिए एक वर्ग पंजीकृत करना और सीएसएस में एक अतिरिक्त प्रविष्टि जोड़ना पर्याप्त है।
परिणामस्वरूप, आपके द्वारा verx क्लास के साथ जोड़ी गई छवि img टैग के लिए CSS में निर्दिष्ट सभी पैडिंग को स्वीकार करेगी, और केवल शीर्ष पक्ष के लिए बाहरी पैडिंग को बदल देगी (हमारे मामले में: 40px)।
मैंने सीएसएस इंडेंट के विवरण को अधिक विस्तृत बनाने का प्रयास किया, लेकिन यदि आपके कोई प्रश्न हैं, तो उन्हें टिप्पणियों के माध्यम से पूछें।
नमस्ते! प्रारंभ में मैं इस लेख को 4 छोटे भागों में विभाजित करना चाहता था, लेकिन फिर मैंने इसके बारे में सोचा। किस लिए? आख़िरकार, यह अधिक सुविधाजनक होता है जब ऐसी जानकारी एक सामग्री के भीतर एकत्र की जाती है।
तो आज हम सीखेंगे कि बाईं और बाकी सभी तरफ - दाईं, ऊपर और नीचे सीएसएस इंडेंटेशन कैसे बनाएं। इन्हें चित्रों और पाठों के लिए बनाया जा सकता है। वे दो प्रकार में आते हैं:
- बाहरी;
- आंतरिक।
पहले के लिए, मुख्य संपत्ति मार्जिन है, बाद वाले के लिए - पैडिंग। स्पष्टता के लिए, मैंने आपके लिए एक छोटा सा उदाहरण बनाया है। आंतरिक और बाह्य स्थान के बीच अंतर करना दृष्टिगत रूप से सुविधाजनक बनाने के लिए, मैंने एक दृश्य तालिका जोड़ी। देखते है क्या हुआ?
मार्जिन
उन्हें एक फाइल में रजिस्टर करके सीएसएस शैलियाँ, आप पृष्ठ पर सूचना ब्लॉक का ओरिएंटेशन सेट कर सकते हैं। उदाहरण के लिए, मैं इसे बाएँ और नीचे ले जाऊँगा। मुझे तुरंत प्रदर्शित करने दीजिए कि यह कैसा दिखेगा।
सामान्य तौर पर, आप इंडेंट सेट करने के लिए निम्नलिखित विकल्पों का उपयोग कर सकते हैं।
बाएँ (मार्जिन-बाएँ)।
दाईं ओर (मार्जिन-दाएं)।
शीर्ष (मार्जिन-शीर्ष)।
निचला (मार्जिन-तल)।
अब मैं आपको एक और बढ़िया बारीकियां दिखाऊंगा।
जैसा कि आप देख सकते हैं, आप विकल्पों में से किसी एक का उपयोग कर सकते हैं - प्रभाव समान है। केवल दूसरे मामले में कोड अधिक कॉम्पैक्ट हो जाता है। यह भी ध्यान दें कि इंडेंट दक्षिणावर्त सेट हैं। हर चीज़ ऊपर से शुरू होती है और बाईं ओर ख़त्म होती है।
गद्दी
यहां प्रक्रिया समान है. केवल अब मैं संपूर्ण तालिका के लिए नहीं, बल्कि स्तंभों की सामग्री के लिए नई संपत्तियाँ जोड़ूँगा।
आइए देखें कि इसका क्या नतीजा निकला।
के अनुरूप खरोजवी सीएसएस बाहरीसंक्षिप्त कोड में या पार्टियों के लिए अलग से लिखा जा सकता है।
ये थे मुख्य बिंदु. अंत में, मैं आपको दिखाऊंगा कि आप किसी काम को और कैसे आसान बना सकते हैं।
चयनित टैग स्तर पर इंडेंटेशन
ऊपर देखे गए मामलों में, वे एक ही समय में पाठ और छवियों के लिए सेट किए गए हैं। वास्तव में, आप किसी विशिष्ट टैग के स्तर पर तत्वों की दूरी निर्धारित कर सकते हैं। मैं तुम्हें दिखाता हूँ कि यह कैसे काम करता है। मैं रद्द करता हूँ अंतिम परिवर्तनऔर स्टाइल फ़ाइल में विशेष कोड निर्दिष्ट करें।
आइए देखें कि परिवर्तनों को सहेजने के बाद क्या हुआ।
चित्र यथावत रहा, केवल संलग्न पाठ बायीं ओर चला गया। इसी तरह की जोड़तोड़ अन्य ब्लॉकों पर लागू की जा सकती है, उदाहरण के लिए, टीआर, स्पैन।
जैसा अतिरिक्त जानकारीमेरा सुझाव है कि आप कार्य के बारे में प्रकाशन पढ़ें। इनका भी पर्याप्त वर्णन किया गया है दिलचस्प तरीके. पाठ में लाल रेखा बनाने या अन्य क्रियाएं करने के लिए उपयोगी हो सकता है।
इसके अतिरिक्त, एक सदस्यता मुफ़्त न्यूज़लेटरपर जानकारी ईमेल पते. ब्लॉग की सदस्यता लेने के लिए एक विशेष फॉर्म है। बाद में मिलते हैं।
सीएसएस इंडेंट प्रबंधन गुणों के आगमन के साथ, वेब डेवलपर्स के पास वेबसाइट पेजों के इंटरफ़ेस और डिज़ाइन को प्रबंधित करने के विशाल अवसर हैं। पहले, इंडेंटेशन को तालिकाओं का उपयोग करके प्रबंधित किया जाता था, जो बहुत अधिक जटिल और बड़ा था।
आइए अनुपस्थिति प्रबंधन के मूल गुणों पर नजर डालें।
मार्जिन प्रॉपर्टी का उपयोग करके सीएसएस का उपयोग करके HTML में मार्जिन प्रबंधित करना
सीएसएस संपत्ति अंतरआपको बिल्कुल नियंत्रित करने की अनुमति देता है बाहरी मार्जिन. मान लीजिए कि एक छवि है जिसके लिए आपको बाहरी मार्जिन निर्दिष्ट करने की आवश्यकता है: शीर्ष पर 30 पिक्सेल, बाईं ओर 20, दाईं ओर 10 और नीचे 5।
मार्जिन को शीर्ष पर सेट करने के लिए हम लिखेंगे: मार्जिन-टॉप: 30px
बायां मार्जिन सेट करने के लिए: मार्जिन-बाएं: 30px
दायां मार्जिन: मार्जिन-दायां: 10px
और निचला: मार्जिन-नीचे: 5px
आप निम्नलिखित लिखकर सब कुछ जोड़ सकते हैं: मार्जिन: 30px 10px 5px 20px;
उदाहरण के लिए, आइए एक छवि के लिए ये इंडेंट सेट करें। हमें निम्नलिखित HTML कोड मिलता है:
आप देख सकते हैं कि छवि मूल तत्व के सापेक्ष कैसे स्थानांतरित हो गई है।
यदि आप मार्जिन निर्दिष्ट करते हैं: 30px, तो सीएसएस पैडिंगचारों तरफ समान होगा और 30 पिक्सल के बराबर होगा।
खाओ विकल्पनिर्देश दो और तीन मानविशिष्टता में: मार्जिन:10px 20px;। यह पैरामीटर सुनिश्चित करेगा कि सीएसएस पर बाहरी मार्जिन ऊपर और नीचे 10px, बाएँ और दाएँ 20px पर दिखाई दे;
अक्सर शुरुआती लेआउट डिजाइनरों के लिए सभी संभावित संयोजनों को तुरंत याद रखना हमेशा संभव नहीं होता है, इसलिए शुरुआती अवस्थाआप निम्नलिखित पैरामीटर का उपयोग कर सकते हैं: मार्जिन-टॉप, मार्जिन-राइट, मार्जिन-लेफ्ट और मार्जिन-बॉटम। ऊपर-ऊपर, दाएँ-दाएँ, बाएँ-बाएँ, नीचे-नीचे।
