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

Question

मुझे यकीन नहीं है कि अगर मैं इन दोनों के बीच के अंतर को पूरी तरह से समझ लूं।

क्या कोई समझा सकता है कि मैं एक के ऊपर एक का उपयोग क्यों करूँगा और वे कैसे भिन्न होंगे?

Answer 1

toppositionसंपत्ति के उपयोग के साथ एक तत्व को ट्विक करने के लिए है।
margin-topतत्व के लिए बाहरी दूरी को मापने के लिए है, पिछले एक के संबंध में।

इसके अलावा, topव्यवहार स्थिति के प्रकार के आधार पर भिन्न हो सकता है absolute, relativeया fixed।

Answer 2

यदि आप दस्तावेज़ प्रवाह में अन्य तत्वों से दूर (ब्लॉक) तत्व को स्थानांतरित करना चाहते हैं, तो आप मार्जिन का उपयोग करेंगे। इसका मतलब है कि यह निम्नलिखित तत्वों को दूर / आगे धकेल देगा। ध्यान रखें कि आसन्न ब्लॉक तत्वों के ऊर्ध्वाधर मार्जिन गिर जाते हैं।

आप आसपास के तत्वों पर कोई असर नहीं तत्व चाहते हैं तो आपके स्थिति (पेट।, Rel।) और प्रयोग करेंगे top, bottom, leftऔर rightसेटिंग्स।

relativeस्थिति के साथ , तत्व तब भी अपने मूल स्थान पर कब्जा कर लेगा जब वह वैधानिक रूप से तैनात होगा। क्यों कुछ नहीं होता है कि, अगर तुम सिर्फ से स्विच staticकरने के लिए relativeस्थिति। वहां से, आप इसे आसपास के तत्वों से दूर कर सकते हैं।

absoluteस्थिति के साथ , आप तत्व (स्थिर) दस्तावेज़ प्रवाह से पूरी तरह से हटा देते हैं, इसलिए यह उस स्थान को मुक्त कर देगा जो उसके कब्जे में है। फिर आप इसे स्वतंत्र रूप से रख सकते हैं - लेकिन इसके चारों ओर लिपटे अगले सर्वोत्तम गैर-सांख्यिकीय रूप से तैनात तत्व के सापेक्ष । यदि कोई नहीं है, तो यह पूरे पृष्ठ पर लंगर डाला जाएगा।

Answer 3

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

उदाहरण:

एचटीएमएल:

<div id="some_element">content</div>

सीएसएस:

#some_element {margin-top: 50%}

इसका मतलब है कि तत्व अपने कंटेनर की 50% ऊंचाई पर html प्रदर्शित करना शुरू कर देगा (अर्थात "सामग्री" शब्द प्रदर्शित करने वाली सामग्री div या some_element से पहले सीधे अपने div या html नोड से 50% ऊंचाई पर प्रदर्शित होगी) लेकिन यदि आप अपना खोलते हैं ब्राउज़र के निरीक्षक (मैक पर विंडोज़ या cmd + alt + i पर मैक) और तत्व पर माउस आप देखेंगे कि यह सीमाओं पर प्रकाश डाला गया है और ध्यान दें कि तत्व को फिर से तैनात करने के बजाय नीचे धकेल दिया गया है।

दूसरी ओर शीर्ष:

#some_element {top: 50%}

वास्तव में तत्व को निरूपित करेगा जिसका अर्थ है कि यह अभी भी अपने कंटेनर के 50% पर प्रदर्शित होगा लेकिन यह तत्व का स्थान देगा इसलिए इसका किनारा इसके तत्व के 50% से शुरू होता है। दूसरे शब्दों में, तत्व और उसके कंटेनर के किनारों के बीच एक अंतर होगा।

चीयर्स!

Answer 4

topसंपत्ति की स्थिति संपत्ति है। इसका उपयोग positionसंपत्ति के साथ किया जाता है , जैसे कि absoluteया relative। margin-topएक तत्व की अपनी संपत्ति है।

Answer 5

बाइट्स से:

"मार्जिन एक तत्व के बॉक्स के किनारे और पूर्ण बॉक्स के किनारे के बीच का स्थान है, जैसे कि एक पत्र का मार्जिन। 'शीर्ष' में तत्व के मार्जिन किनारे को ब्लॉक बॉक्स से विस्थापित करता है, जैसे कि कागज का एक ही टुकड़ा। एक कार्डबोर्ड बॉक्स, लेकिन यह कंटेनर के किनारे के खिलाफ नहीं है। "

मेरी समझ यह है कि मार्जिन-टॉप तत्व पर एक मार्जिन बनाता है, और शीर्ष ऑफसेट पर युक्त तत्व के शीर्ष किनारे के नीचे तत्व के शीर्ष किनारे को सेट करता है।

आप इसे यहाँ आज़मा सकते हैं:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

बस अंतर देखने के लिए मार्जिन-टॉप के साथ शीर्ष बदलें।