एब्सोल्यूट पोजिशनिंग मार्जिन ऑटो इश्यू को समझना

"मार्जिन-लेफ्ट: ऑटो" और " वाले तत्व पर "पोजीशन: एब्सोल्यूट" लागू करते समय मार्जिन-राइट: ऑटो," आप देख सकते हैं कि मार्जिन पर कोई प्रभाव नहीं पड़ता है। यह व्यवहार "स्थिति: सापेक्ष" से भिन्न है, जहां मार्जिन अपेक्षा के अनुरूप काम करता है। इस विसंगति को समझने के लिए, आइए अंतर्निहित यांत्रिकी में गहराई से उतरें।

जब कोई तत्व बिल्कुल स्थित होता है, तो उसे दस्तावेज़ के सामान्य प्रवाह से हटा दिया जाता है। इसका मतलब यह है कि यह अब अपने पड़ोसी तत्वों के साथ बातचीत नहीं करता है और इसका आकार केवल इसके स्पष्ट आयामों या इसके कंटेनर के आकार से निर्धारित होता है। परिणामस्वरूप, यदि तत्व की चौड़ाई स्पष्ट रूप से सेट नहीं की गई है, तो ब्राउज़र द्वारा गणना किया गया मान 'ऑटो' है, जो ज्यादातर मामलों में 0 है।

इस परिदृश्य में, "मार्जिन-लेफ्ट: ऑटो" लागू करना और "मार्जिन-राइट: ऑटो" बाएं और दाएं मार्जिन को तत्व की आधी चौड़ाई पर सेट करके तत्व के चारों ओर जगह बनाने का प्रयास करता है। हालाँकि, चूँकि तत्व की गणना की गई चौड़ाई 0 है, परिकलित मार्जिन मान भी 0 हो जाता है। यही कारण है कि मार्जिन पर कोई प्रभाव नहीं पड़ता है।

इसके विपरीत, जब "स्थिति: सापेक्ष" का उपयोग किया जाता है, तो तत्व बना रहता है दस्तावेज़ के सामान्य प्रवाह में. इसका आकार इसकी सामग्री और प्रवाह के भीतर व्याप्त स्थान से निर्धारित होता है। जब "मार्जिन-लेफ्ट: ऑटो" और "मार्जिन-राइट: ऑटो" लागू किया जाता है, तो मार्जिन की गणना तत्व की वास्तविक चौड़ाई के आधार पर की जाती है, जो इस मामले में गैर-शून्य है। इसलिए, मार्जिन को सही ढंग से लागू किया जाता है, जिसके परिणामस्वरूप तत्व अपने युक्त तत्व के भीतर केंद्रित हो जाता है। %; परिवर्तन: अनुवाद(-50%, -50%);" इसे इसके कंटेनर के भीतर केन्द्रित करने के लिए। यह विधि तत्व को वांछित स्थान पर सटीक रूप से रखती है, भले ही मार्जिन 'ऑटो' पर सेट हो।