दिलचस्प पोस्ट
प्रॉपर्टी नाम पर अंडरस्कोर उपसर्ग? Matlab ode solvers: बदलते राज्य और निर्दिष्ट समय NoInitialContextException त्रुटि LINQ, कहां () vs FindAll () AddTarget के लिए मापदंडों को पास करना: कार्यवाही: नियंत्रण एंटर के लिए स्ट्रीमर रीडर से शुरुआत करने के लिए MySQL डालें क्वेरी से नई रिकॉर्ड प्राथमिक कुंजी आईडी प्राप्त करें? XSLT: <xsl: copy> के दौरान कोई विशेषता मान कैसे बदल सकता है? एक जावा ऑब्जेक्ट के गुणों को डंप करना सार्वजनिक स्थिर अंतिम क्षेत्रों के साथ एक वर्ग बनाम जावा enum का क्या लाभ है? एलएमएक्स के डिस्टॉप्टर पैटर्न कैसे काम करता है? org.apache.http.entity.FileEntity को एंड्रॉइड 6 (मार्शमलो) में पदावनत किया गया है VBA में एक शेल कमांड से आउटपुट मूल्य कैप्चर करें? मैक्सडेग्री ओफ़पेरललिस्म क्या करता है? "Qt इंस्टॉल किए बिना लिनक्स पर qt5 ऐप लॉन्च करने के दौरान प्लेटफॉर्म प्लगइन" xcb "" लोड करने में विफल रहा

सीएसएस: मार्जिन टॉप जब पेरेंट के पास कोई सीमा नहीं होती है

जैसा कि आप इस तस्वीर में देख सकते हैं, मुझे एक हरे रंग की div एक नारंगी div है जिसमें कोई भी शीर्ष सीमा नहीं होती है। नारंगी div में 30px शीर्ष मार्जिन होता है, लेकिन यह हरे रंग का div नीचे भी धकेल रहा है। बेशक, एक शीर्ष सीमा जोड़ने से समस्या ठीक हो जाएगी, लेकिन मुझे div जरूरत है जो शीर्ष सीमा रहित हो। मैं क्या कर सकता था?

 .body { border: 1px solid black; border-top: none; border-bottom: none; width: 120px; height: 112px; background-color: lightgreen; } .body .container { background-color: orange; height: 50px; width: 50%; margin-top: 30px; } 
 <div class="header">Top</div> <div class="body"> <div class="container">Box</div> </div> <div class="foot">Bottom</div> 

धन्यवाद

वेब के समाधान से एकत्रित समाधान "सीएसएस: मार्जिन टॉप जब पेरेंट के पास कोई सीमा नहीं होती है"

आप overflow:auto जोड़ सकते हैं overflow:auto मार्जिन-गिरने को रोकने के लिए overflow:autohttp://www.w3.org/TR/CSS2/box.html#collapsing-margins देखें

आप जो अनुभव करते हैं वह मार्जिन टूट रहा है। मार्जिन एक तत्व के आसपास एक क्षेत्र निर्दिष्ट नहीं करता है, बल्कि तत्वों के बीच न्यूनतम दूरी

जैसा कि हरी कंटेनर में कोई सीमा या पैडिंग नहीं है, वहां नारंगी तत्व के मार्जिन को शामिल करने के लिए कुछ भी नहीं है मार्जिन का उपयोग शीर्ष तत्व और नारंगी तत्व के बीच होता है जैसे कि हरी कंटेनर के पास मार्जिन होता।

नारंगी तत्व पर एक मार्जिन के बजाय हरे कंटेनर में एक पेडिंग का उपयोग करें

margin बजाय padding उपयोग करें:

 .body .container { ... padding-top: 30px; } 

यह निश्चित नहीं है कि यह आपके मामले में काम करेगा, लेकिन मैं इसे निम्न सीएसएस संपत्तियों के साथ हल करता हूं

 #element { padding-top: 1px; margin-top: -1px; } 

#element एलिमेंट नीचे धकेल दिया जा रहा था क्योंकि यह पहला बच्चा तत्व margin-top: 30px । इस सीएसएस के साथ, यह अब अपेक्षित काम करता है 🙂 निश्चित नहीं है कि यह हर मामले के लिए काम करेगा, वाईएमएमवी।

आप हरे रंग की बॉक्स पर padding-top: 30 जोड़ सकते हैं padding-top: 30 पर नारंगी बॉक्स पर सापेक्ष स्थिति का उपयोग करें top: 30px , या नारंगी बॉक्स को फ्लोट करें और उसी margin-top: 30px उपयोग करें margin-top: 30px

आप इस दस्तावेज़ को पढ़ते हैं: बॉक्स मॉडल – मार्जिन टूटना

सीएसएस

 .body { border: 1px solid black; border-bottom: none; border-top: none; width: 120px; height: 112px; background-color: lightgreen; padding-top: 30px; } .body .container { background-color: orange; height: 50px; width: 50%; } 

यकीन है कि यह कैसे ध्वनियों को ध्वस्त नहीं करता, लेकिन एक पारदर्शी सीमा जोड़ने के बारे में कैसे?