शीर्ष और बाएं बनाम मार्जिन-टॉप और मार्जिन-बाएं

Question

शीर्ष और बाएं गुणों और शीर्ष और बाएं मार्जिन का उपयोग करने के बीच क्या अंतर है?

मुझे पता है कि शीर्ष और बाएं आमतौर पर स्थिति में उपयोग किए जाते हैं: पूर्ण स्थिति लेकिन मैं अब भी सोच रहा हूं कि कोई बड़ा अंतर है या नहीं।

पूर्व:

position:absolute; 
top:5px; 
left:5px; 

-वसेस-

margin-top:5px; 
margin-left:5px; 

Answer 1

अच्छा, मुख्य अंतर यह है कि पूरी तरह से स्थित तत्व सामग्री प्रवाह से बाहर खींचे जाते हैं।

लेकिन अपेक्षाकृत स्थित तत्वों के साथ, आसपास की सामग्री obfuscated हो सकता है।

दूसरी तरफ मार्जिन तत्व के आकार में जोड़े जाते हैं जबकि आस-पास की सामग्री तदनुसार बहती है।

कुछ मतभेदों के साथ this sample fiddle देखें।

निश्चित रूप से ऐसी स्थितियां हैं जहां दोनों एक ही परिणाम प्रदान करते हैं, लेकिन सामान्य परिस्थितियों में, ये दो अपरिवर्तनीयता केवल विनिमय योग्य और तुलनीय नहीं हैं।

Answer 2

मार्जिन अपने बॉक्स और आसन्न बक्से के बीच की जगह का वर्णन है। अपेक्षाकृत स्थित बॉक्स (यानी जो सामान्य प्रवाह का हिस्सा हैं) उनके बीच पर्याप्त जगह रखेंगे कि प्रत्येक की "मार्जिन" आवश्यकताओं को पूरा किया जाता है (जिसे "मार्जिन ढहने" कहा जाता है)।

top और left दूसरी ओर स्थितीय विशेषताओं जहां अपने बॉक्स स्थित है निर्दिष्ट कर रहे हैं; पूरी तरह से स्थित बक्से के लिए मूल्य निकटतम युक्त बॉक्स के सापेक्ष लिया जाता है जो स्वयं ही पूरी तरह से स्थित है। शीर्ष/बाएं/नीचे/दाएं गुण आपके मार्जिन सहित आपके बॉक्स के संबंधित किनारे का स्थान निर्दिष्ट करते हैं।

संक्षेप में, दोनों पूरी तरह से अलग अवधारणाएं हैं। आम तौर पर बहने वाले बक्से के लिए आपको पड़ोसी बक्से के बीच की दूरी को नियंत्रित करने के लिए margin का उपयोग करना चाहिए।

Answer 3

एअर्थात् अंतर है। top जैसे बॉक्स ऑफसेट निर्दिष्ट करते हैं कि एक बॉक्स के मार्जिन एज (नीचे दी गई छवि में बिंदीदार किनारों) को संदर्भ किनारे से ऑफसेट किया गया है (बिल्कुल स्थित तत्वों के लिए, यह बॉक्स के युक्त ब्लॉक का शीर्ष किनारा है)। margin-top जैसे मार्जिन गुण बॉक्स के मार्जिन क्षेत्र की चौड़ाई निर्दिष्ट करें (नीचे 0 छवि में बिंदीदार किनारे और ठोस किनारे के बीच दूरी TM)।

बीtop और left तैनात तत्वों पर ही लागू होती है, जबकि margin-top और margin-left टेबल शीर्षक के अलावा अन्य तालिका प्रदर्शन प्रकार के साथ तत्वों को छोड़कर सभी तत्वों के लिए लागू (static के अलावा और कुछ करने के लिए position सेट के साथ तत्वों) , टेबल और इनलाइन-टेबल।