2010-10-27 19 views
61

मुझे यकीन नहीं है कि मैं इन दोनों के बीच अंतर को पूरी तरह समझता हूं।सीएसएस: शीर्ष बनाम मार्जिन-टॉप

क्या कोई समझा सकता है कि मैं एक दूसरे का उपयोग क्यों करूंगा और वे अलग-अलग कैसे होंगे?

उत्तर

56

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

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

5
बाइट्स से

:

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

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

आप इसे यहाँ की कोशिश कर सकते हैं:

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

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

65

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

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

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

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

6

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

उदाहरण:

एचटीएमएल:

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

सीएसएस:

#some_element {margin-top: 50%} 

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

शीर्ष:

#some_element {top: 50%} 

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

चीयर्स!

2

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

संबंधित मुद्दे