Studio एडिटर: डॉकिंग, मार्जिन और पैडिंग के साथ काम करना
9 मिनट
डिवाइसेज़ की लगातार बदलती दुनिया में, एलिमेंट्स की पोजिशन कंट्रोल करना ज़रूरी है, ताकि वे अलग-अलग स्क्रीन साइज़ पर आपकी पसंद के मुताबिक दिखें। Studio एडिटर में एलिमेंट्स अपने-आप डॉक हो जाते हैं, जिससे वे सही जगह पर बने रहते हैं।
इससे आप एलिमेंट्स को आसानी से मूव कर सकते हैं और आपको अलग-अलग ब्रेकपॉइंट्स पर उनकी पोजिशन की चिंता नहीं करनी पड़ती। हालांकि, आप इंस्पेक्टर पैनल से पोजिशन, डॉकिंग और मार्जिन खुद भी सेट कर सकते हैं।
डॉकिंग, मार्जिन और पैडिंग के लिए px* (स्केल) डिफ़ॉल्ट मेज़रमेंट यूनिट है। आपको दिखाई देने वाली px* वैल्यू, आपके मौजूदा कैनवास साइज़ के हिसाब से पिक्सेल के बराबर होती है। px* वैल्यू अपने-आप कैसे स्केल होती है, यह देखने के लिए किसी दूसरे ब्रेकपॉइंट पर स्विच करें।
कैनवास पर एलिमेंट्स की पोजिशन सेट करना
ड्रैग और ड्रॉप का इस्तेमाल करके, आप हर ब्रेकपॉइंट के लिए अलग-अलग अपने एलिमेंट की पोजिशन सीधे कैनवास पर सेट कर सकते हैं। इससे आप पक्का कर सकते हैं कि एलिमेंट हर स्क्रीन पर सही जगह दिखाई दे।
जब तक एलिमेंट उसी पैरेंट (जैसे सेक्शन या सेल) में रहता है, आप उसे मूव कर सकते हैं और इससे दूसरे
ब्रेकपॉइंट्स पर कोई असर नहीं पड़ता। अगर आप किसी एलिमेंट को दूसरे पैरेंट में मूव करते हैं (रीपैरेंट), तो यह बदलाव सभी ब्रेकपॉइंट्स पर लागू होता है।
इंस्पेक्टर में X और Y कोऑर्डिनेट्स
मौजूदा कैनवास साइज़ पर अपने एलिमेंट की सटीक पोजिशन देखने के लिए, उसके X और Y कोऑर्डिनेट्स चेक करें।
- X: पैरेंट एलिमेंट (जैसे सेक्शन, कंटेनर या स्टैक) के बाएं किनारे से दाएं किनारे तक का हॉरिज़ॉन्टल प्लेन।
- Y: पैरेंट एलिमेंट के ऊपर से नीचे तक का वर्टिकल प्लेन।
नीचे दिए गए उदाहरण में, बटन को उसके पैरेंट एलिमेंट यानी सेल से बाहर मूव करने पर Y के पास मौजूद px* वैल्यू नेगेटिव हो जाती है।
ऑटोमैटिक और मैन्युअल डॉकिंग
एडिटर में नया एलिमेंट जोड़ने पर, वह अपने-आप डॉक हो जाता है, ताकि सभी स्क्रीन और डिवाइसेज़ पर अपनी जगह पर बना रहे। हालांकि, आप ऑटो डॉकिंग को डिसेबल करके डॉकिंग पॉइंट्स मैन्युअल रूप से चुन सकते हैं।
ज़्यादा जानकारी के लिए, नीचे दिए गए किसी टॉपिक पर क्लिक करें।
एडिटर में ऑटोमैटिक डॉकिंग
का इस्तेमाल करके), तो वह किसी भी कॉर्नर पर अपने-आप डॉक नहीं होता। 
डॉकिंग को मैन्युअल रूप से एडजस्ट करना
, बॉटम 
, राइट 
या लेफ्ट 
।
टिप:
रिस्पॉन्सिव चेकर की मदद से आप उन एलिमेंट्स का पता लगा सकते हैं, जिन्हें पैरेंट के टॉप के बजाय बॉटम में डॉक किया जाना चाहिए। इनके कारण लाइव साइट पर खाली जगह दिख सकती है।
एलिमेंट्स को डॉक करते समय मार्जिन का इस्तेमाल करना
मार्जिन एक बफर की तरह काम करते हैं और दूसरे एलिमेंट्स के साथ ओवरलैप होने से बचाते हैं। किसी एलिमेंट को डॉक करने पर, मार्जिन उस एलिमेंट और उसके पैरेंट के किनारों के बीच तय दूरी बनाए रखते हैं। आप उन साइड्स पर भी मार्जिन जोड़ सकते हैं, जो डॉक नहीं की गई हैं।
मार्जिन बनाने या एडिट करने के लिए:
- संबंधित एलिमेंट चुनें।
- एडिटर के ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- नीचे स्क्रॉल करके पोजिशन पर जाएं।
- संबंधित मार्जिन के लिए वैल्यू डालें—लेफ्ट, राइट, टॉप या बॉटम।
टिप:
रिस्पॉन्सिव चेकर की मदद से आप गैर-जरूरी मार्जिन का पता लगा सकते हैं, क्योंकि वे पैरेंट को रिसाइज करने की आपकी क्षमता को सीमित कर सकते हैं।
रिस्पॉन्सिव कंटेनर्स के चारों ओर पैडिंग जोड़ना
कंटेनर के किनारों—टॉप, बॉटम या साइड्स—और उसके अंदर मौजूद कंटेंट के बीच स्पेस बनाने के लिए पैडिंग जोड़ें। पैडिंग को सभी तरह के रिस्पॉन्सिव कंटेनर्स में जोड़ा जा सकता है, जिनमें बेसिक कंटेनर्स, स्टैक्स, फ्लेक्सबॉक्स, रिपीटर्स, सेल्स, सेक्शन और पृष्ठ शामिल हैं।
पैडिंग जोड़ने के बाद, आप ड्रैग और ड्रॉप का इस्तेमाल करके इसे सीधे कैनवास पर एडजस्ट कर सकते हैं। यह ऑप्शन देखने के लिए रिस्पॉन्सिव कंटेनर चुनें और पैडिंग पर होवर करें।
पैडिंग जोड़ने के लिए:
- संबंधित एलिमेंट चुनें।
- एडिटर के ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- लेआउट तक नीचे स्क्रॉल करें।
- चुनें कि आप कौन-सी पैडिंग एडिट करना चाहते हैं:
- कोई खास साइड
: आइकन पर क्लिक करें और संबंधित साइड—बाईं, दाईं, ऊपर या नीचे—के लिए वैल्यू डालें। - हॉरिजॉन्टल पैडिंग
: बाईं और दाईं पैडिंग के लिए वैल्यू डालें। - वर्टिकल पैडिंग
: ऊपर और नीचे की पैडिंग के लिए वैल्यू डालें।
- कोई खास साइड
एलिमेंट्स को ओवरलैप होने से रोकना
एलिमेंट्स को पोजिशन करते समय, यह पक्का करना जरूरी है कि वे छोटे ब्रेकपॉइंट्स पर ओवरलैप न हों। ऐसा होने से रोकने के लिए, नीचे दिए गए टिप्स देखें।
टॉप पर डॉक करना
लेआउट व्यवस्थित करने के लिए सेल्स जोड़ना
स्टैक अप्लाई करना
ट्रबलशूटिंग:
अगर अभी एलिमेंट्स के बीच अनचाहा ओवरलैप दिखाई दे रहा है, तो
यह ट्रबलशूटिंग गाइड देखें।
अक्सर पूछे जाने वाले सवाल
ज्यादा जानकारी के लिए, नीचे किसी सवाल पर क्लिक करें।
मुझे कैनवास पर मार्जिन और पैडिंग के इंडिकेटर क्यों नहीं दिख रहे हैं?
पर क्लिक करें।
क्या मार्जिन और पैडिंग सेट करते समय मैं px* के अलावा दूसरी यूनिट्स इस्तेमाल कर सकता हूं?
मैं सभी स्क्रीन साइज पर एलिमेंट्स का एलाइनमेंट एक जैसा कैसे रख सकता हूं?
मैं बड़े गैप या अनचाहे खाली स्पेस को कैसे ठीक कर सकता हूं, खासकर मोबाइल पर?
अगर कुछ एलिमेंट्स मोबाइल या डेस्कटॉप पर कटे हुए दिखें, तो मुझे क्या करना चाहिए?