बड़ा नकारात्मक मार्जिन-दाहिने पूर्ण तत्व को लपेटता है क्यों नहीं?

Question

अद्यतन:

स्थिति मूल्य चौड़ाई बदल जाएगा।

JSFiddle: http://jsfiddle.net/caicai/mbtb5m7p/2/

---

क्यों div .a2 अपने माता पिता की चौड़ाई के बराबर की चौड़ाई, div .a1 में पाठ रैप नहीं होगा, जबकि करता है?

JSFiddle: http://jsfiddle.net/caicai/mbtb5m7p/

.r { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 22px; 
 
    background: blue; 
 
} 
 
.a1 { 
 
    position: absolute; 
 
    top: 30px; 
 
    margin-right: -9999px; 
 
    background: green; 
 
} 
 
.a2 { 
 
    position: absolute; 
 
    top: 60px; 
 
    background: orange; 
 
}

<div class="r"> 
 
    <div class="a1"> 
 
     Why does this line no wrap. 
 
    </div> 
 
    <div class="a2"> 
 
     Why does this line wrap. 
 
    </div> 
 
</div>

Answer 1

div.r 100px की चौड़ाई है और रिश्तेदार रखा गया है।

बच्चे .a1 और .a2 पूर्ण हैं। उनके (अपेक्षाकृत रखा गया) माता-पिता से संबंधित।

नकारात्मक मार्जिन के बिना, बच्चे अपने माता-पिता के आकार के बराबर अधिकतम चौड़ाई लेंगे।

लेकिन, नकारात्मक मार्जिन जोड़कर, आप बच्चों को अपने माता-पिता सीमाओं पर "फ़्लोट" करने की अनुमति देते हैं।

Answer 2

ऐसा नहीं है कि .a1 की सामग्री अब लपेट नहीं रही है, यह है कि .a1 की सामग्री को लपेटने की कोई आवश्यकता नहीं है क्योंकि उपलब्ध आंतरिक अंतरिक्ष को आपके नकारात्मक मार्जिन द्वारा स्ट्रिंग के लिए काफी व्यापक बना दिया गया है।

तो आपकी div.a1 अनिवार्य रूप से .r + की चौड़ाई होगी जो नकारात्मक मार्जिन का मूल्य है, जो सही चरम को खींच रहा है और आपके div के आकार को बढ़ा रहा है।

यह सुंदर कितना बॉक्स मॉडल काम करता है, यह पता here या here

Answer 3

मार्जिन जाँच कुछ है कि इसके चालू होने के a1 वर्गों और a2 के लिए माता-पिता तत्व (वर्ग/आईडी) यहाँ वर्ग आर निर्भर करता है।

1) अब आपके पास चौड़ाई है: माता-पिता वर्ग (कक्षा) के लिए 100 पीएक्स, इसलिए सभी बच्चे वर्ग (कक्षा एए 2) समान चौड़ाई प्राप्त करता है।

2) कक्षा ए 2 के लिए कोई समस्या नहीं है, यह कक्षा पूरी तरह से सामान्य है क्योंकि मूल वर्ग (.r) की तुलना में कोई अद्वितीय (अलग) संपत्ति नहीं है, इसलिए ठीक से व्यवहार करता है।

3) अब वर्ग। ए 1 के मामले में, जो मार्जिन-दाएं: नकारात्मक वैल्यू मिलने तक ठीक से व्यवहार करता है;।

तो पहले मार्जिन को समझना, मार्जिन कक्षा/तत्व ब्लॉक और उसके मूल वर्ग/तत्व ब्लॉक के बीच की जगह है। उदाहरण मार्जिन-बाएं: 5 पीएक्स; ताकि शेष तीन पक्षों (शीर्ष, नीचे, दाएं) के लिए क्रमशः 5px छोड़ने के बाद विशेष ब्लॉक शुरू होता है

अब ऋणात्मक मार्जिन, जब इसका उपयोग किया जाता है तो यह उनके मूल ब्लॉक सीमा को अपराध करता है। यही वह अपने माता-पिता की सीमाओं से परे हो जाता है। तो यहां आपने मार्जिन-दाएं निर्दिष्ट किया: -99 99 पीएक्स; तो यह कक्षा की सीमा से परे हो जाता है। आर, फिर भी यह आपको एक विचार दे रहा है कि -99 99 पीएक्स एक बड़ा मूल्य है, स्क्रीन से परे div को फेंक देना चाहिए, लेकिन सीमित पाठ के रूप में यह केवल पाठ के साथ क्षेत्र को दिखाता है।

कक्षा ए 1 में अधिक टेक्स्ट डालने से यह निश्चित रूप से स्क्रीन स्कोप से आगे जाएगा, लेकिन पाठ पर्याप्त से अधिक होना चाहिए।

Graphical Explanationअपडेट किया गया