ऑटो मार्जिन में क्या करता है: 0 ऑटो?

Question

में क्या करता autoहै margin:0 auto;?

मुझे समझ में नहीं आ रहा है कि क्या autoकरता है। मुझे पता है कि कभी-कभी वस्तुओं को केंद्रित करने का प्रभाव पड़ता है। धन्यवाद।

Answer 1

जब आपने widthउस ऑब्जेक्ट पर निर्दिष्ट किया margin: 0 autoहै, जिस पर आपने आवेदन किया है, तो वह वस्तु उसके मूल कंटेनर में केंद्र में बैठ जाएगी।

autoदूसरे पैरामीटर के रूप में निर्दिष्ट करना मूल रूप से ब्राउज़र को बाएं और दाएं मार्जिन को स्वचालित रूप से निर्धारित करने के लिए कहता है, जो उन्हें समान रूप से सेट करके करता है। यह गारंटी देता है कि बाएं और दाएं मार्जिन को एक ही आकार में सेट किया जाएगा। पहला पैरामीटर 0 इंगित करता है कि ऊपर और नीचे का मार्जिन दोनों 0 पर सेट होगा।

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

इसलिए, आपको एक उदाहरण देने के लिए , यदि माता-पिता 100px है और बच्चा 50px है, तो autoसंपत्ति यह निर्धारित करेगी कि वहाँ margin-leftऔर बीच साझा करने के लिए मुक्त स्थान की 50px है margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

जो दे:

margin-left:25;
margin-right:25;

इस jsFiddle पर एक नजर है । आपको माता-पिता की चौड़ाई निर्दिष्ट करने की आवश्यकता नहीं है, केवल बच्चे की वस्तु की चौड़ाई।

Comments

लेकिन हम कभी नहीं करने के लिए किसी भी चौड़ाई को परिभाषित bodyऔर हम हमेशा दे widthऔर margin:0 autoकरने के लिए#wrapper

— जितेंद्र व्यास

ठीक है तो बॉडी और ऑब्जेक्ट के बीच मार्जिन की गणना ब्राउज़र द्वारा स्वचालित रूप से की जाएगी।

— जितेंद्र व्यास

क्या इसमें कोई समान मूल्य है %? मेरा मतलब है कि सीएसएस में कोई अन्य संपत्ति है जो बाएं और दाएं की तरह एक ही परिणाम दे सकती हैauto

— जितेंद्र व्यास

@GenericTypeTea - और margin:auto 0हालत में क्या होता है ?

— जितेन्द्र व्यास

हालांकि, जब मैं मार्जिन का उपयोग करता हूं: 20 ऑटो क्या ऐसा लगता है कि बाएं-दाएं स्थिति को प्रभावित करता है? ऐसा लगता है कि मैंने जो कुछ किया है वह शीर्ष / निचले मार्जिन को जोड़ दिया गया था ...

— पितोसालस

Answer 2

ऑटो: ब्राउज़र मार्जिन सेट करता है। इसका परिणाम ब्राउज़र पर निर्भर है

मार्जिन: 0 ऑटो निर्दिष्ट करता है

* top and bottom margins are 0
* right and left margins are auto

Answer 3

ब्लॉक स्तर के लिए चौड़ाई और मार्जिन की गणना पर सीएसएस विनिर्देश से , सामान्य प्रवाह में गैर-प्रतिस्थापित तत्व :

यदि 'मार्जिन-लेफ्ट' और 'मार्जिन-राइट' दोनों 'ऑटो' हैं, तो उनके उपयोग किए गए मान समान हैं। यह क्षैतिज रूप से युक्त ब्लॉक के किनारों के संबंध में तत्व को केंद्र में रखता है।

Comments

"उनके उपयोग किए गए मूल्य समान हैं" इसका मतलब क्या है?

— जितेंद्र व्यास

@ मेटल-गियर-सॉलिड - यदि माता-पिता की चौड़ाई (ब्राउज़र द्वारा या निर्दिष्ट चौड़ाई से निर्धारित की गई है) 100px है और आपके बच्चे की div की चौड़ाई 50px है। फिर मार्जिन: 0 ऑटो यह निर्धारित करेगा कि उपलब्ध स्थान का 50px है। इसके बाद इसे 2 से विभाजित करके, 25 दिया जाएगा। बाएं और दाएं मार्जिन दोनों को 25 पर सेट किया गया है, अर्थात मान समान रूप से सेट किए गए हैं।

— djdd87

उपयोग किए गए मान वास्तव में उपयोग किए गए मानों को संदर्भित करते हैं जो उस तत्व के वास्तविक दृश्य गुणों पर निर्भर करते हैं जो इस संपत्ति और इसके ब्लॉक का उपयोग करते हैं। लिंक किए गए अनुभाग में एक सूत्र है जिसका उपयोग किसी तत्व और इसके ब्लॉक के बीच क्षैतिज अंतर की गणना करने के लिए किया जाता है। उस अंतर को तब समान रूप से परिभाषित किया जाता है और वास्तविक क्षैतिज मार्जिन मानों के रूप में उपयोग किया जाता है।

— गंबू

Answer 4

margin:0 auto;

0ऊपर-नीचे और autoबाएँ-दाएँ के लिए है। इसका अर्थ है कि बाएं और दाएं मार्जिन तत्व की चौड़ाई और कंटेनर की चौड़ाई के अनुसार ऑटो मार्जिन लेंगे।

आम तौर पर यदि आप किसी तत्व को केंद्र की स्थिति में रखना चाहते हैं तो margin:autoपूरी तरह से काम करता है। लेकिन यह केवल ब्लॉक तत्वों में काम करता है।

Answer 5

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 लेफ्ट-राइट के लिए टॉप-बॉटम और ऑटो के लिए है। ब्राउज़र मार्जिन सेट करता है।

Answer 6

यह कुछ स्पष्टीकरण के साथ स्पष्ट हो जाता है कि दोनों मान कैसे काम करते हैं।

इसके लिए मार्जिन प्रॉपर्टी शॉर्टहैंड है:

margin-top
margin-right
margin-bottom
margin-left

तो केवल दो मान कैसे आते हैं?

ठीक है, आप इस तरह से चार मूल्यों के साथ मार्जिन व्यक्त कर सकते हैं:

margin: 10px, 20px, 15px, 5px;

जिसका मतलब होगा 10px टॉप, 20px राइट, 15px बॉटम, 5px लेफ्ट

इसी तरह आप दो मूल्यों के साथ भी व्यक्त कर सकते हैं:

margin: 20px 10px;

यह आपको 20px ऊपर और नीचे और बाएँ और दाएँ 10px का मार्जिन देगा।

और यदि आप सेट करते हैं:

margin: 20px auto;

फिर इसका मतलब है कि 20px का टॉप और बॉटम मार्जिन और ऑटो का लेफ्ट और राइट मार्जिन। और ऑटो का मतलब है कि बाएं / दाएं मार्जिन स्वचालित रूप से कंटेनर के आधार पर सेट किए गए हैं। यदि आपका तत्व एक ब्लॉक प्रकार का तत्व है, तो यह एक बॉक्स है और दृश्य की पूरी चौड़ाई लेता है, फिर ऑटो बाएं और दाएं मार्जिन को एक ही सेट करता है और इसलिए तत्व केंद्रित होता है।

Answer 7

यह "केंद्र" टैग के लिए प्रतिस्थापन का उपयोग करने के लिए एक टूटी हुई / बहुत मुश्किल है। यह तब काम आता है जब आपको ब्लॉक और टेक्स्ट के लिए टूटी हुई टेबल और नॉन-वर्किंग सेंटरिंग की आवश्यकता होती है।