सीएसएस - मार्गिन्यूटो; - यह काम किस प्रकार करता है

का उपयोग करते हुए मार्जिन: ऑटो एक ब्लॉक तत्व को क्षैतिज रूप से केन्द्रित करना एक प्रसिद्ध तकनीक है। लेकिन क्या आपने कभी सोचा है कि यह क्यों या कैसे काम करता है? इसका उत्तर देने के लिए, हमें पहले इस बात पर ध्यान देने की आवश्यकता है कि ऑटो कैसे काम करता है। इसके अलावा मिश्रण में क्या है ऑटो संभवतः मार्जिन में कर सकते हैं, अगर यह ऊर्ध्वाधर केंद्र, और कुछ अन्य मुद्दों के लिए काम करता है.

लेकिन पहले, क्या करता है ऑटो वास्तव में करते हैं?

की परिभाषा ऑटो के साथ बदलता रहता है तत्वों, तत्व प्रकार तथा प्रसंग. हाशिये में, ऑटो दो चीजों में से एक का मतलब हो सकता है: उपलब्ध स्थान या 0 px को लें। ये दोनों करेंगे एक तत्व के लिए विभिन्न लेआउट को परिभाषित करें.

"ऑटो" ऊपर उपलब्ध स्थान लेना

यह मार्जिन का सबसे आम उपयोग है ऑटो हम अक्सर आते हैं। असाइन करके ऑटो किसी तत्व के बाएं और दाएं हाशिये पर, वे तत्व के कंटेनर में उपलब्ध क्षैतिज स्थान को समान रूप से उठाते हैं - और इस तरह तत्व केंद्रित हो जाता है.

हालांकि, यह केवल क्षैतिज मार्जिन के लिए काम करेगा (पर अधिक) क्यूं कर बाद में), और यह भी फ्लोट के साथ काम नहीं करेगा तथा इनलाइन तत्व और अपने आप से, यह भी काम नहीं कर सकता में पूर्ण तथा नियत तत्व (हालांकि हम यह देखेंगे कि उन कामों को कैसे किया जाए).

उपलब्ध स्थान ले कर अशुद्ध फ्लोट

जबसे ऑटो दाएं और बाएं दोनों हाशिये में "उपलब्ध" स्थान को समान रूप से लेते हैं, आपको क्या लगता है कि मूल्य क्या होगा ऑटो उनमें से केवल एक को दिया जाता है?

के साथ एक बाएँ या दाएँ मार्जिन ऑटो "उपलब्ध" स्थान के सभी को ऊपर ले जाएगा जिससे तत्व दिखाई देगा जैसे कि यह दाएं या बाएं फ्लश किया गया है.

“ऑटो” 0px की तुलना में

जैसा पहले बताया गया है, ऑटो फ्लोटेड, इनलाइन और निरपेक्ष तत्वों में काम नहीं करेगा। ये सभी तत्व पहले से ही हैं उनके लेआउट पर फैसला किया, इसलिए उपयोग करने में कोई फायदा नहीं है ऑटो हाशिये के लिए और उम्मीद है कि यह उसी तरह केंद्रित हो जाएगा.

कि जैसे कुछ का उपयोग करने के प्रारंभिक उद्देश्य को हरा देंगे नाव. इसलिये ऑटो उन तत्वों में 0px का मान होगा.

ऑटो अगर इसकी चौड़ाई नहीं है, तो यह एक विशिष्ट ब्लॉक तत्व पर भी काम नहीं करेगा। अब तक आपके द्वारा दिखाए गए सभी उदाहरणों में चौड़ाई है.

मूल्य की एक चौड़ाई ऑटो होगा 0px मार्जिन. एक ब्लॉक एलिमेंट की चौड़ाई आमतौर पर इसके कंटेनर के कवर होने पर होती है ऑटो या 100% और इसलिए एक मार्जिन ऑटो से गणना की जाएगी 0px ऐसी स्थिति में.

मूल्य के साथ ऊर्ध्वाधर मार्जिन के लिए क्या होता है ऑटो?

ऑटो ऊपर और नीचे दोनों हाशिये में हमेशा 0px (निरपेक्ष तत्वों को छोड़कर) की गणना की जाती है। W3C कल्पना यह इस तरह कहते हैं:

“अगर “मार्जिन टॉप” या “margin-bottom” है “ऑटो”, उनका उपयोग किया गया मान 0 है "

क्यों, कुआं जो अब तक एक रहस्य है। यह विशिष्ट ऊर्ध्वाधर पृष्ठ प्रवाह के कारण हो सकता है, जहां पृष्ठ का आकार ऊँचाई-वार बढ़ता है. तो, अपने कंटेनर में एक तत्व को लंबवत रूप से केंद्रित करने से वह अपने आप को पृष्ठ के सापेक्ष केंद्रित नहीं होने वाला है, जब यह क्षैतिज रूप से किया जाता है (ज्यादातर मामलों में).

और शायद यह इसी कारण से है, उन्होंने पूर्ण तत्वों के लिए एक अपवाद जोड़ने का फैसला किया, जो पूरे पृष्ठ की ऊंचाई के साथ लंबवत केंद्रित हो सकता है.

यह मार्जिन पतन प्रभाव (आसन्न तत्वों के पतन) के कारण भी हो सकता है” मार्जिन) जो ऊर्ध्वाधर मार्जिन के लिए एक और अपवाद है.

हालाँकि, उत्तरार्द्ध एक असंभावित मामला प्रतीत होता है - चूंकि ऐसे तत्व जो अपने मार्जिन को नहीं गिराते हैं - जैसे कि फ्लोट्स, और तत्वों के साथ बाढ़ के अलावा अन्य दिखाई, अभी भी 0px वर्टिकल मार्जिन के लिए असाइन करें ऑटो.

पूरी तरह से स्थिति तत्वों को केंद्रित करना

चूंकि पूरी तरह से तैनात तत्वों के लिए एक अपवाद होता है, हम”का उपयोग करेंगे ऑटो मूल्य एक ऊर्ध्वाधर और क्षैतिज रूप से केंद्र में। लेकिन इससे पहले, हमें यह पता लगाना होगा कि कब क्या होगा मार्जिन: ऑटो वास्तव में काम करते हैं जैसे हम इसे पूरी तरह से तैनात तत्व में चाहते हैं.

यह वह जगह है जहाँ एक और W3C कल्पना आती है:

“अगर तीनों “बाएं”, “चौड़ाई”, तथा “सही” कर रहे हैं “ऑटो”: पहले कोई सेट करें “ऑटो” के लिए मूल्य “मार्जिन छोड़ दिया” तथा “मार्जिन-सही” 0 करने के लिए ... "

“अगर तीनों में से कोई नहीं है “ऑटो”: अगर दोनों “मार्जिन छोड़ दिया” तथा “मार्जिन-सही” कर रहे हैं “ऑटो”, अतिरिक्त अवरोध के तहत समीकरण को हल करें कि दोनों हाशिये समान मूल्य प्राप्त करते हैं "

बहुत सुंदर कहते हैं कि के लिए क्षैतिज ऑटो मार्जिन समान स्थानों को जब्त करने के लिए, के लिए मूल्य बाएं, चौड़ाई तथा सही नहीं होना चाहिए ऑटो , उनका डिफ़ॉल्ट मान। तो हमें बस इतना करना है कि उन्हें एक बिल्कुल तैनात तत्व में कुछ मूल्य देना है. बाएं तथा सही होना चाहिए सही केंद्र के लिए समान मूल्य.

ऐनक भी ऊर्ध्वाधर मार्जिन के लिए कुछ इसी तरह का उल्लेख करता है.

“यदि तीनों “चोटी”, “ऊंचाई”, तथा “तल” ऑटो हैं, सेट हैं “चोटी” स्थिर स्थिति के लिए ... ”

“अगर तीनों में से कोई भी नहीं है “ऑटो”: अगर दोनों “मार्जिन टॉप” तथा “margin-bottom” कर रहे हैं “ऑटो”, अतिरिक्त अवरोध के तहत समीकरण को हल करें कि दोनों हाशिये समान मूल्य प्राप्त करते हैं ... ”

इसलिए, एक पूर्ण तत्व के लिए लंबवत केंद्रित है, आईटी इस चोटी, ऊंचाई, तथा तल मान नहीं होना चाहिए ऑटो.

अब इन सभी को मिलाकर, यही हम हैं”मिल जाएगा:

निष्कर्ष

यदि आप कभी भी निम्नलिखित तत्वों को लपेटे बिना (जैसे व्हाट्स के साथ क्या होता है) अपने पृष्ठ पर एक तत्व को दाएं या बाएं फ्लश करना चाहते हैं, तो याद रखें कि उपयोग करने का विकल्प है ऑटो मार्जिन के लिए.

किसी तत्व को पूर्ण रूप में परिवर्तित करना इसलिए इसे लंबवत केंद्रित किया जा सकता है, यह एक महान विचार नहीं हो सकता है। फ्लेक्सबॉक्स और सीएसएस ट्रांसफॉर्म जैसे अन्य विकल्प हैं जो उन लोगों के लिए अधिक उपयुक्त हैं.