CSS3 बॉक्स आकार: मार्जिन-बॉक्स; क्यों नहीं?



layout position (6)

आप width: calc(50% - 24px); उपयोग नहीं कर सके width: calc(50% - 24px); अपने कोल के लिए? फिर अपने मार्जिन सेट करें।

https://src-bin.com

हमारे पास box-sizing: margin-box; क्यों नहीं है box-sizing: margin-box; ? आम तौर पर जब हम box-sizing: border-box; हमारी स्टाइल शीट्स में हम वास्तव में पूर्व का मतलब रखते हैं।


उदाहरण:

मान लें कि मेरे पास 2 कॉलम पेज लेआउट है। दोनों स्तंभों की चौड़ाई 50% है, लेकिन वे बदसूरत लगती हैं क्योंकि कोई गटर नहीं है (बीच में अंतर); नीचे सीएसएस है:

.col2 {
    width: 50%;
    float: left;
}


एक गटर लगाने के लिए आपको लगता है कि हम केवल 2 कॉलम के पहले पर सही मार्जिन सेट कर सकते हैं; कुछ इस तरह:

.col2:first-child {
    margin-right: 24px;
}

लेकिन यह दूसरी कॉलम रैप को एक नई लाइन पर बना देगा, क्योंकि निम्नलिखित सत्य है:

50% + 50% + 24px > 100%

box-sizing: margin-box; तत्व की गणना की चौड़ाई में मार्जिन सहित इस मुद्दे को हल करेगा। box-sizing: border-box; से अधिक उपयोगी नहीं होने पर मुझे यह बहुत उपयोगी लगेगा box-sizing: border-box;


Answer #1

ऐसा इसलिए है क्योंकि बॉक्स-आकार देने वाली विशेषता किसी दिए गए आयाम-विशिष्ट मानों (पैडिंग, सीमाओं) की गणना करने के बाद किसी तत्व के आकार को संदर्भित करती है। "बॉक्स-साइजिंग: सीमा-बॉक्स" एक तत्व की ऊंचाई / चौड़ाई निर्धारित करता है और पैडिंग के साथ-साथ सीमा चौड़ाई को भी ध्यान में रखता है। किसी तत्व के मार्जिन का दायरा तत्व से अधिक होता है, जिसका अर्थ है कि यह पृष्ठ के प्रवाह और उसके आस-पास के तत्वों को संशोधित करता है, इसलिए तत्व अपने भाई तत्वों के सापेक्ष अपने माता-पिता के भीतर फिट बैठता है। आखिरकार एक "मार्जिन-बॉक्स" विशेषता मान प्रमुख समस्याओं का कारण बनता है और अनिवार्य रूप से तत्वों की ऊंचाई / चौड़ाई को सेट करने जैसा ही होता है।


Answer #2

मुझे लगता है कि हमारे पास एक box-sizing: margin-box हो सकता है box-sizing: margin-box । सीएसएस बॉक्स मॉडल बिल्कुल दिखाता है, फ्रेम के मार्जिन की स्थिति क्या हैं।

मामूली समस्याएं हैं - उदाहरण के लिए, मार्जिन बॉक्स ओवरलैप कर सकते हैं - लेकिन उन्हें हल करना मुश्किल नहीं है।

मुझे लगता है, स्थिति वही है, जैसा कि हम overflow-x और overflow-y संयोजनों के साथ देख सकते हैं, तालिका-कोशिकाओं में पूर्ण स्थिति वाले divs के साथ, बॉक्स-आकार के साथ न्यूनतम | अधिकतम-चौड़ाई | ऊंचाई के संयोजन के साथ , और इसी तरह।

विशेषताएं हैं, वास्तव में सरल विशेषताएं, जो ब्राउज़र डेवलपर बस विकसित नहीं होते हैं।

आईएमएचओ, box-sizing: margin-box एक बहुत उपयोगी सुविधा थी। एक अन्य उपयोगी विशेषता box-sizing: padding-box , यह कम से कम मानक में मौजूद है, लेकिन इसे किसी भी प्रमुख ब्राउज़र में लागू नहीं किया गया था। नवीनतम क्रोम में भी नहीं!

नोट: @ ओरियल की टिप्पणी: फ़ायरफ़ॉक्स ने बॉक्स आकार का कार्यान्वयन किया: पैडिंग-बॉक्स। लेकिन दूसरों ने नहीं किया, और यह कल्पना से हटा दिया गया था। फ़ायरफ़ॉक्स इसे संस्करण 50 में हटा देगा। दुखद।


Answer #3

शायद आरजीबीए का उपयोग करके सीमा को 0% अस्पष्टता पर सेट करें और सीमा को मार्जिन के रूप में उपयोग करें।


Answer #4

Codrops पर मार्जिन के प्रभाव और पंक्ति के अतिप्रवाह के प्रभाव के विषय पर कुछ अच्छे लेख हैं। वे सभी ब्राउज़रों के लिए सामान्यीकृत सीएसएस सेटिंग फ़ॉन्ट आकार के साथ रीम या एम यूनिट का उपयोग करने का सुझाव देते हैं, फिर जब आप चौड़ाई और मार्जिन सेट करते हैं तो पंक्तियों की चौड़ाई पर प्रभाव का ट्रैक रखना आसान होता है, जिससे टिप्पणियों में नोट बनाते हैं कुल चौड़ाई। 16px से 1 em का रूपांतरण लक्षित व्यूपोर्ट्स कुल बुद्धि का गणना करने का तरीका है।

कम से कम देव मंच के लिए ऐसा काम करना और फिर यदि आप 'उत्तरदायी' टेम्पलेट चाहते हैं तो आप मार्जिन चौड़ाई सहित चौड़ाई को% में परिवर्तित कर सकते हैं।

गटर को संभालने का सुझाव देने वाला दूसरा और अक्सर आसान तरीका content: ''; बाद छद्म का उपयोग करना content: ''; आपके प्रत्येक कॉलम पर जो मुझे लगता है वह वास्तव में अच्छा काम करता है। यदि आप एक डिवी क्लास सेट करते हैं जो परिभाषित अंतिम कॉलम जैसे अंत है तो आप उस वर्ग को लक्षित कर सकते हैं जिसके बाद छद्म नहीं है, या व्यापक हो; जो कभी भी आपके लेआउट के लिए उपयुक्त है।

इस छद्म तत्व विधि का उपयोग करने का जोड़ा बोनस यह आपको छाया के लिए एक लक्ष्य भी प्रदान करता है जो पाठकों की निगरानी पर फ्लैट छवि के लिए 3 डी प्रभाव और अधिक गहराई दे सकता है। मैं इस समय इस बटन के साथ बटनों पर इस्तेमाल होने वाले प्रभावों को बढ़ाकर, ग्रेडियेंट्स को 'ट्वीविंग' और जेड-इंडेक्स का प्रयोग कर रहा हूं।


Answer #5

ब्लॉक-स्तर के आयाम , सामान्य प्रवाह में गैर-प्रतिस्थापित तत्वों को संतुष्ट करना चाहिए

मार्जिन-बाएं + सीमा-बाएं-चौड़ाई + पैडिंग-बाएं + चौड़ाई + पैडिंग-दाएं + सीमा-दाएं-चौड़ाई + मार्जिन-दाएं = ब्लॉक युक्त चौड़ाई

जब अधिक बाधित हो, ब्राउज़र को बाएं या दाएं मार्जिन को समायोजित करना होगा। मुझे लगता है कि इसका मतलब है मार्जिन बॉक्स की चौड़ाई जिसमें ब्लॉक (यानी 100%) की चौड़ाई के बराबर होनी चाहिए

आपके मामले के लिए, box-sizing: border-box साथ पारदर्शी सीमाएं box-sizing: border-box मार्जिन की तरह काम कर सकती है





w3c