top संपत्ति बस निर्धारित करता है कितनी दूर युक्त तत्व के ऊपर से उस बॉक्स मॉडल गाया जा रहा है। के मामले में शुरू कर देना चाहिए position: fixed, वह खिड़की ही है।के मामले में, यह गैर-स्थैतिक स्थिति वाला अगला मूल तत्व है।
दूसरी तरफ मार्जिन बॉक्स-मॉडल का हिस्सा है। बॉक्स के शीर्ष पर मार्जिन जोड़ने से बॉक्स के ऊपर मौजूद खाली स्थान बढ़ जाता है।
एक position: fixed बॉक्स के लिए निम्नलिखित परतों पर विचार करें:
top:10px
margin-top:10px
------------border-top:1px------------
padding-top:10px
content
सभी मार्जिन, सीमा, और गद्दी के बॉक्स मॉडल का हिस्सा हैं। उस पूरे तत्व, या "टुकड़ा", स्थिति के दौरान सिर्फ एक बड़ा वर्ग है। इसलिए, यदि आपके पास बॉक्स के शीर्ष पर 10px का मार्जिन है, और शीर्ष से तत्व 10px को स्थिति में रखें, तो इसमें विंडो के शीर्ष के बीच 20px मार्जिन होने और दृश्यमान बॉक्स शुरू होने की उपस्थिति होगी।
मैंने very simple example in jsFiddle भी बनाया है।
आप पहले अनुभाग में देख सकते हैं, केवल तत्व पर position: fixed की स्थापना:
आप ग्राफिक्स पसंद है, इस उदाहरण है, जहां लाल बॉक्स है एक position: fixed ले वास्तव में इसे कहीं भी स्थानांतरित नहीं करता है। यह सिर्फ दस्तावेज़ के प्रवाह से हटा देता है।
अनुभाग अनुभाग में, margin-top: 10px जोड़कर तत्व 10px नीचे ले जाता है क्योंकि बॉक्स के शीर्ष पर 10px मार्जिन है।हालांकि, यह वास्तव में कहीं भी स्थानांतरित नहीं हुआ है। बॉक्स अभी लंबा हो गया है क्योंकि बॉक्स मॉडल बदल गया है।
तीसरे खंड में, top: 10pxका उपयोग करके वास्तव में बॉक्स कंटेनर के शीर्ष से 10px होने के लिए बॉक्स को स्थानांतरित करता है। इसके पहले खंड में सटीक वही बॉक्स मॉडल है।
धारा चार इसके ऊपर दूसरे खंड की तरह है, नकारात्मक मार्जिन को छोड़कर यह दस पिक्सल तक बढ़ने का कारण बनता है। बॉक्स मॉडल अभी भी लंबा है और बॉक्स अभी भी स्थानांतरित नहीं हुआ है।
आप एक तत्व पर एक पूर्ण स्थिति सेट करते हैं, तत्व बिल्कुल आप किसी भी अन्य स्थिति गुण निर्धारित नहीं करते हैं, तो नहीं जाते हैं। तो, बिना top, right, bottom, या left संपत्ति सेट के बिना, तत्व उस स्थिति में रहता है जब यह प्रवाह के हिस्से के रूप में प्रस्तुत किया गया होता, तो यह अभी प्रवाह से हटा दिया गया है। तो एक मार्जिन जोड़ना, या तो सकारात्मक या नकारात्मक, यह उस स्थिति से ऊपर या नीचे बढ़ने लगता है। हकीकत में, आप तत्व के बॉक्स मॉडल को बदल रहे हैं।
आपको यह भी महसूस करना होगा कि ऊपर और नीचे मार्जिन (और यहां तक कि पैडिंग) पर प्रतिशत का उपयोग करके की ऊंचाई से कोई लेना देना नहीं है। यह वास्तव में कितना मार्जिन है यह जानने के लिए चौड़ाई का उपयोग करता है। margin-top: 10% कह रहा है कि उपलब्ध चौड़ाई का 10% मूल्य, उपलब्ध ऊंचाई नहीं, और इसे नकारात्मक बनाने से केवल उस मान को अस्वीकार कर दिया जाएगा। मैंने इसका उल्लेख किया क्योंकि यह उस पहले प्रश्न से प्रासंगिक है जहां आपने लिंक किया था जहां आप margin-top के प्रतिशत का उपयोग कर रहे थे।
मुझे आशा है कि यह उस कवर को कवर करेगा जिसे आप ढूंढ रहे थे। मैं यह नहीं बता सका कि बिल्कुल आप उलझन में थे इसलिए मैंने जितना संभव किया उतना समझाया।
हां, मुझे अपने प्रश्न के लिए बॉक्स मॉडल के बारे में पता है। मैं जो पूछ रहा हूं वह है कि डीओएम के प्रवाह के अंदर नहीं होने वाली किसी चीज़ पर 'मार्जिन' कैसे लागू किया जा रहा है, क्योंकि पहले प्रयोग के साथ मेरे प्रयोग से यह खिड़की के संबंध में नियम लागू नहीं कर रहा है, जो मुझे उम्मीद थी व्यवहार होना – Ryan
क्या वह विज़ुअल उदाहरण आपको किसी की मदद करता है? – animuson