नकारात्मक दाएं मार्जिन क्यों काम नहीं करते?

Question

margin-left: -10px के साथ तत्व के किनारे के बाद से इसके माता-पिता के किनारे पार हो जाते हैं, margin-right: -10px के साथ ऐसा क्यों नहीं होता है?

example

div { 
 
    background: red; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
p { 
 
    background: blue; 
 
    width: 100%; 
 
} 
 

 
.left { 
 
    margin-left: -10px; 
 
} 
 

 
.right { 
 
    margin-right: -10px; 
 
}

<div> 
 
    <p class="left">Hello</p> 
 
</div> 
 
<div> 
 
    <p class="right">Hello</p> 
 
</div>

Answer 1

क्योंकि तत्वों डिफ़ॉल्ट रूप से बाएँ से सही से बाहर रखी हैं यह सही करने के लिए नहीं छोड़ा। float<p> के दाएं होने पर आप विपरीत प्रभाव देख सकते हैं।

jsFiddle

.right { 
    margin-right: -10px; 
    float:right; 
} 

Answer 2

अच्छी खबर यह है कि नकारात्मक हाशिए काम करना है!

काम पर नकारात्मक हाशिए देखने के लिए, पर विचार निम्नलिखित कोड का टुकड़ा:

.wrapper { 
 
    outline: 1px solid blue; 
 
    padding: 40px; 
 
} 
 

 
.content { 
 
    outline: 1px solid red; 
 
    background-color: #D8D8D8; 
 
} 
 

 
.content p { 
 
    outline: 1px dotted blue; 
 
    background-color: rgba(255, 255, 0, 0.3); 
 
    margin: 0 0 0 0; 
 
    text-align: justify; 
 
} 
 

 
.content p.lefty { 
 
    margin-left: -20px; 
 
} 
 

 
.content p.righty { 
 
    margin-right: -20px; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, ...</p> 
 
    <p class="lefty">Sed ipsum ante, dictum vel rhoncus id, ...</p> 
 
    <p class="righty">Curabitur aliquam tristique mattis...</p> 
 
    </div> 
 
</div>

मैं रों outline 'सभी div लिए s' और p के जोड़ा के विस्तार को दिखाने के लिए सामग्री बक्से

पहले पैराग्राफ में शून्य मार्जिन है और मैंने बाईं ओर एक अनुच्छेद ऑफसेट किया है और दूसरा दाईं ओर है।

यदि आपके पास अनुच्छेद की चौड़ाई को भरने के लिए पर्याप्त सामग्री है (या यदि आप रूपरेखा दिखाते हैं), तो आप content बॉक्स के बाहर टेक्स्ट बॉक्स प्रवाह देखेंगे। आप अनुच्छेद outline से भी देख सकते हैं कि पाठ बाएं और दाएं तक विस्तारित होता है।

हालांकि, दाईं ओर प्रभाव देखने के लिए, आपको अनुच्छेद की पूरी चौड़ाई को भरने के लिए पर्याप्त सामग्री की आवश्यकता है या आपको बाल तत्व पर पृष्ठभूमि रंग या रूपरेखा सेट करने की आवश्यकता है।

यदि आप content पर चौड़ाई और ऊंचाई को ठीक करना शुरू करते हैं, तो आप content के बाहर बहने वाले पैराग्राफ जैसे अन्य प्रभाव देखेंगे।

इस सरल कोड संरचना का अध्ययन सीएसएस बॉक्स मॉडल के कई पहलुओं को दिखाता है और यह इसके साथ कुछ समय बिताने के लिए रोशनी है।

फिडल संदर्भ: http://jsfiddle.net/audetwebdesign/2SKjM/

आप wrapper से गद्दी निकालते हैं, तो आप सही मार्जिन पारी की सूचना नहीं सकता है क्योंकि तत्वों पैरेंट कंटेनर की पूरी चौड़ाई या के आधार पर पेज चौड़ाई को भरने के लिए विस्तार होगा एचटीएमएल/सीएसएस के विशिष्ट विवरण।

मेरा उदाहरण प्रभाव क्यों नहीं दिखाया !!! ???

अपने उदाहरण में, आप प्रभाव नहीं दिख रहा है क्योंकि आप width: 100%, जो पैरा माता पिता कंटेनर की चौड़ाई (अपने उदाहरण में 200px) लेने के लिए निर्देशित करता है निर्दिष्ट द्वारा p तत्वों की चौड़ाई तय किया था।

आप 100% से auto के लिए चौड़ाई के लिए एक सरल बदलाव करते हैं:

p { 
    background: blue; 
    width: auto; 
} 

तुम सिर्फ सही करने के लिए बाहर के रूप में आप की उम्मीद अपने दूसरे पैरा देखेंगे।

नोट: रेखांकित सीमा इसके अलावा बनाम, ध्यान दें कि लाल बॉक्स outline, जो content भीतर पाठ बॉक्स encloses की वजह से है, तब भी जब पाठ बॉक्स माता पिता (content) तत्व के बाहर का विस्तार। नतीजतन, outline बॉक्स संबंधित तत्व के border बॉक्स से कहीं अधिक बड़ा हो सकता है।

p { 
    background: blue; 
    width: 100%; 
} 

लिए:

p { 
    background: blue; 
    display: block; 
} 

यहाँ डेमो:

Answer 3

, बस, बस इस सीएसएस बदल http://jsfiddle.net/pVKNz/

आप तत्वों के स्थानांतरण की तरह बना दिया चाहते हैं, इस सीएसएस का उपयोग करें:

.left { 
    margin-left: -10px; 
    margin-right:10px; 
} 

.right { 
    margin-right: -10px; 
    margin-left:10px; 
}