"मार्जिन-बाएं", और "बाएं" (या "मार्जिन-दाएं", और "दाएं") के बीच अंतर

Question

margin-left: 10px; और position: relative; left: 10px; के बीच क्या अंतर है?

यह एक ही परिणाम

Answer 1

जब आप position:relative के साथ कुछ ले जाते हैं तो आप वास्तव में अंतरिक्ष, यह पृष्ठ पर ले जाता है सिर्फ जहां यह प्रदर्शित किया जाता है नहीं जा रहे हैं।

img{ display:block; } 
#first{ margin-top:50px; } 

इस सीएसएस बनाम:

img{display:block;} 
#first{position:relative; top:50px;} 

निम्नलिखित सीएसएस के साथ

<div id = "testbox"> 
    <img src = "http://www.dummyimage.com/300x200" id = "first"> 
    <img src = "http://www.dummyimage.com/300x200" id = "second"> 
</div> 

:

इस परीक्षण करने के लिए एक आसान तरीका है इस तरह एक सरल संरचना का उपयोग करने के लिए है

आप देखेंगे कि पहली बार सब कुछ 50px नीचे चला जाता है दूसरा केवल पहली छवि को नीचे ले जाता है (जिसका अर्थ है कि यह दूसरी छवि को ओवरलैप करेगा)।

संपादित करें: आप यहाँ कार्रवाई में यह बाहर की जाँच कर सकते हैं: http://www.jsfiddle.net/PKqMT/5/

टिप्पणी बाहर position:relative; और top:100px; लाइनों और margin-top लाइन uncomment और आप अंतर देखेंगे।

Answer 2

मैं केवल यह मार्जिन के साथ अन्य पदों के लिए है लगता है कर सकते हैं उत्पादन करने लगता है। यानी .:

margin-left: 5px; 
position: inherited; left: 10px; 

Answer 3

सबसे आसान तरीका मैं समझा सकता है यह है कि margin-left तत्व में ही चलता है, जबकि left (position: relative के साथ) अन्य तत्वों दूर धक्का है। हालांकि यह नहीं है, शायद सबसे स्पष्ट विवरण।

चित्रों के साथ

, हालांकि:

  +---------------------------------------------------------------------------+--------------+ 
      |                       | 
      |    +------------------------------------------------------------+    | 
      |    |               |    | 
      |    |    +------------------------------+    |    | 
      |    |    |        |    |    | 
    position |    |    |        |    |    | 
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->| 
      |    |    |        |    |    | 
      |    |    +------------------------------+    |    | 
      |    |               |    | 
      |    +------------------------------------------------------------+    | 
      +------------------------------------------------------------------------------------------+ 

position: absolute के साथ भी छोड़ दिया तत्व ही है और जो कुछ भी वस्तु तत्व के खिलाफ स्थिति में है के बाईं सीमा के बीच की दूरी को परिभाषित करने के लिए कार्य करता है।

Answer 4

किसी दिए गए ब्लॉक तत्व (उदाहरण के लिए एक डीआईवी) पर विचार करें बॉक्स के रूप में। position:relative; उस तत्व के सापेक्ष पृष्ठ पर बॉक्स की स्थिति बनाता है जो इसके अंदर घोंसला है (उदाहरण के लिए एक और डीआईवी) और left:10px; बॉक्स को 10 पिक्सेल दाएं (बाएं से AWAY) ले जाता है।

अब margin-left: 10px; के पास इसके साथ कुछ लेना देना नहीं है और बॉक्स के बाईं ओर एक मार्जिन (अदृश्य पावर फ़ील्ड यदि आप पसंद करते हैं: पी) बनाता है, जो इसके बाईं ओर फंस गया कोई अन्य निश्चित तत्व है तो इसे स्थानांतरित करता है।