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

Question

हमारे पास क्यों नहीं है 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;।

Comments

"हमारे पास क्यों नहीं है box-sizing: margin-box;?" क्योंकि जब क्षैतिज मार्जिन में गिरावट नहीं होती है, तो इस तरह का प्रस्ताव ऊर्ध्वाधर मार्जिन पतन के साथ गंभीरता से हस्तक्षेप करेगा। वैसे भी, यदि आप मानकीकरण के लिए कुछ प्रस्तावित करना चाहते हैं, तो स्टैक ओवरफ्लो सही जगह नहीं है। मेलिंग सूचियों का प्रयास करें।

— BoltClock

कुछ स्थितियों में, आप border: xxx solid transparent;सीमा के अंदर शामिल होने के बाद से इसका उपयोग कर सकते हैं border-box। यह हालांकि कुछ अन्य चीजों को तोड़ देगा, जैसे कि box-shadow।

— नाथन उस्मान

क्या अब हम मानकों के बारे में सभी प्रश्नों को "गैर-रचनात्मक" के रूप में बंद कर रहे हैं ?? यह पूछने के लिए एक उचित सवाल है, और यहां तक ​​कि इसका सीधा जवाब है: हमारे पास नहीं है box-sizing: margin-boxक्योंकि यह मार्जिन-पतन के साथ काम नहीं करेगा।

— थोमसट्रेटर

@thomasrutter: जब मैंने इसे बंद किया था, उस समय इसके लिए एक बेहतर शब्द नहीं था, जो एक साल से अधिक समय पहले था। वैसे भी, "रचनात्मक नहीं" अब चला गया है (मतलब नहीं, हम वास्तव में अब कुछ भी गैर-रचनात्मक के रूप में बंद नहीं करते हैं), और चूंकि पूरे "मुझे एक विचार है, यहां बताया गया है कि यह कैसे काम करता है, चलो इसे एक मानक बनाते हैं!" बात हटा दी गई है क्योंकि इसे अंतिम बार बंद कर दिया गया था, यह वास्तव में एक व्यावहारिक लगता है "एक्स काम क्यों नहीं कर सकता है?" सवाल। यह अभी भी एक अविश्वसनीय रूप से सट्टा प्रश्न है (ऊपर दिया गया मेरा तर्क वास्तव में एक शिक्षित अनुमान से अधिक कुछ नहीं है), लेकिन मैं उस पर आगे टिप्पणी नहीं करूंगा।

— बोल्टलॉक

अगर आप रिक्ति चाहते हैं तो सिर्फ इनर-रैप / डिव क्यों न करें: codepen.io/chriscoyier/pen/eGcLw

— ashley

Answer 1

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

Comments

यह अत्यधिक ब्राउज़र-निर्भर है। संभवत: 2020 के आसपास यानी 15 इसे सपोर्ट करेगा और आपको अपने काम में भी इसका इस्तेमाल करने की अनुमति होगी :-(

— peterh - Reicaate Monica

फ़ायरफ़ॉक्स में इतनी अच्छी तरह से काम नहीं कर रहा है? (या कुछ और जो मैंने किया है वह नहीं है)

— लॉरेंगीनर

@ मॉर्गन फ़ेनी: हाँ, लेकिन बॉक्स-साइज़िंग में मार्जिन-बॉक्स नामक एक मूल्य नहीं है (जो इस प्रश्न का पूरा बिंदु है)। यहां तक ​​कि अगर इस तरह के मूल्य को अब पेश किया गया था, तो आप मौजूदा ब्राउज़रों में पैचिंग / पॉलीफिलिंग / चमकाने का प्रस्ताव कैसे देते हैं?

— BoltClock

हाँ, लेकिन ... विशेष रूप से एक समाधान के रूप में कैल्क () का सुझाव देने वाले उत्तर का जवाब।

— मॉर्गन फ़ेनी

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

— पंचो

Answer 2

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

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

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

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

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

---

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

Comments

फ़ायरफ़ॉक्स लागू किया box-sizing: padding-box। लेकिन दूसरों ने ऐसा नहीं किया, और इसे कल्पना से हटा दिया गया। फ़ायरफ़ॉक्स इसे 50 संस्करण में हटा देगा। दुख की बात है।

— ओरिऑल

Answer 3

शीर्ष पर स्थित व्यक्ति पैडिंग और बॉर्डर सहित समग्र चौड़ाई में मार्जिन जोड़ने के बारे में पूछ रहा है। बात यह है, मार्जिन बॉक्स के बाहर लगाया जाता है और उपयोग करते समय गद्दी और सीमा नहीं होती है border-box।

मैंने border-marginविचार को प्राप्त करने की कोशिश की है। मैंने पाया है कि यदि मार्जिन का उपयोग कर आप या तो .lastअंतिम आइटम की श्रेणी जोड़ सकते हैं (मार्जिन के साथ, तो शून्य का मार्जिन लागू करें, या उपयोग करें :last-child/:last-of-type)। या चारों ओर समान मार्जिन जोड़ें (ऊपर पैडिंग संस्करण के समान)।

यहां उदाहरण देखें: http://codepen.io/mofeenster/pen/Anidc

border-boxतत्व की चौड़ाई + उसकी पैडिंग + उसकी सीमा की कुल चौड़ाई के रूप में गणना करता है। इसलिए यदि आपके पास 2 divs हैं जो 50% चौड़ा हैं, तो वे आसन्न होंगे। यदि आप 8pxउन्हें पैडिंग जोड़ते हैं, तो आपके पास एक नाली होगी 16px। एक रैपिंग एलिमेंट के साथ मिलाएं - जिसमें पैडिंग भी है 8px- आपके पास एक अच्छी तरह से बिछाया गया ग्रिड होगा जिसमें चारों तरफ समान गटर हैं।

इस उदाहरण को यहाँ देखें: http://codepen.io/mofeenster/pen/vGgje

बाद वाला मेरा पसंदीदा तरीका है।

Answer 4

मुझे यकीन है कि यह सब स्पष्ट है, लेकिन मैं इसे वैसे भी टाइप करूंगा क्योंकि ... ठीक है, मुझे व्यायाम की आवश्यकता है। क्या निम्नलिखित परिणाम उतने ही कुशल नहीं होंगे जितना कि box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingयह नियंत्रित करने के लिए उपयोग किया जाता है कि किस बिंदु से तत्व के समग्र आकार के लिए पैडिंग और बॉर्डर का आकलन किया जाता है। इसलिए जब यह चौड़ाई के pxसाथ मार्जिन को शामिल करने के लिए कोषेर नहीं है %(जैसा कि आमतौर पर हमेशा होता है), तो यह गणना करना आसान है कि सापेक्ष प्रतिशत राशि क्या होनी चाहिए क्योंकि आपको परिभाषित चौड़ाई में पैडिंग और बॉर्डर को शामिल करने की आवश्यकता नहीं है।

Comments

मार्जिन-बॉक्स जैसी किसी चीज़ का उपयोग मामला पिक्सेल मार्जिन के साथ प्रतिशत चौड़ाई को मिलाने में सक्षम है। यदि आप उनके बीच 1px मार्जिन के साथ दो 50% बक्से चाहते हैं, तो इसे 1% समान प्रतिशत के मार्जिन के साथ पूरा नहीं किया जा सकता है - कुछ छोटे स्क्रीन आकार 1% से 0 पिक्सेल तक कम हो जाएंगे और अचानक आपके पास कोई मार्जिन नहीं होगा। हमें वास्तव में जरूरत है calc () @Slouch शो या फ्लेक्सबॉक्स मॉडल के लिए अधिक ब्राउज़र समर्थन की।

यदि वह देखभाल है, तो मूल कंटेनर 100px से कम होगा, और मुझे उम्मीद है कि कुछ डिजाइन तत्व उस बिंदु पर फिर से विचार करेंगे। कुछ अन्य चीजें हैं जो आप नेस्टेड तत्वों और पसंद के साथ कर सकते हैं, लेकिन, हां, चर गणना बहुत सुंदर होगी। यदि आप sass या उससे कम जैसी चीजों में हैं, तो मुझे लगता है कि वे इस सामान का एक बहुत कुछ करते हैं। मैं उनके साथ खेल चुका हूं, लेकिन अभी तक जेडी नहीं हूं।

— प्लमर

आप जो सुझाव दे रहे हैं वह एक काम है। जब आप जटिल लेआउट के साथ काम कर रहे हों तो सीएसएस लिखना एक आदर्श तरीका नहीं है। आप मान रहे हैं कि डिजाइनर या लेखक अपने डिजाइन में प्रतिशत का उपयोग करना चाहते हैं। इस समस्या की परवाह किए बिना, भले ही आप कैल्सेल () फ़ंक्शन का उपयोग करके पिक्सेल मार्जिन का उपयोग करके रिक्ति के लिए काम करते हैं, यह अभी भी डिजाइनर को सीमित करता है क्योंकि उन्हें पूर्व निर्धारित करना चाहिए कि गटरिंग क्या है, बजाय इसे सीएसएस का उपयोग किए ओवरराइट करने की अनुमति देना।

— limitlessloop

मैं आपकी बात नहीं समझता। हाथ में मुद्दा यह था कि px और% कारणों में लाइन ब्रेक शामिल है क्योंकि मार्जिन आकार गणना में शामिल नहीं है। एक मार्जिन एक तत्व के आकार में शामिल नहीं है, यह वह स्थान है जिसे आप एक तत्व के आसपास दिखाना चाहते हैं। साथ ही, margin-boxबहुआयामी मार्जिन गणना कैसे संभालेंगे? @mediaविराम बिंदु, max-widthऔर min-widthठीक काम करते हैं। मुझे लगता है कि margin-boxकुछ ब्लोट में कटौती हो सकती है, लेकिन मुझे यह भी कारण है कि इसे क्यों बेमानी माना जा सकता है।

— प्लमर

कोई भी इस बात का उल्लेख क्यों नहीं कर रहा है कि यह मार्जिन प्रतिशत मान किसी कारण से चौड़ाई का प्रतिशत है ... ऊंचाई या चौड़ाई मायने नहीं रखती है। अभिभावक की चौड़ाई का उपयोग किया जाता है। जो कम से कम कहने के लिए चक्कर है .. इसलिए ऊपर कोड काम नहीं करना चाहिए और काम नहीं करता है। जब तक आप ऊँचाई और चौड़ाई बराबर नहीं बनाते।

— मुहम्मद उमेर

Answer 5

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

Comments

मेरी क्षमा याचना लेकिन मुझे समझ में नहीं आता कि "मार्जिन-बॉक्स" के माध्यम से स्थानिक गणना में पैडिंग, बॉर्डर और मार्जिन को कैसे "बॉर्डर-बॉक्स" के माध्यम से पैडिंग और बॉर्डर सहित वैचारिक रूप से अलग किया जाएगा। निश्चित रूप से यह एक ही विषय पर एक बदलाव है?

— पंचो

Answer 6

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

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

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

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

Answer 7

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

मार्जिन-लेफ्ट + बॉर्डर-लेफ्ट-चौड़ाई + पेडिंग-लेफ्ट + चौड़ाई + पेडिंग-राइट + बॉर्डर-राइट-चौड़ाई + मार्जिन-राइट = चौड़ाई वाले ब्लॉक

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

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

Answer 8

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

Comments

हैक की तरह लगता है, लेकिन काम करना होगा।

— मॉर्गन फेनी

यह उपयोगी साबित हो सकता है अगर आप नौकरी हासिल करने के लिए रैपर का उपयोग नहीं करना चाहेंगे।

— limitlessloop

... जब तक आपको वास्तव में एक सीमा की आवश्यकता नहीं है

— फ्रांसेस्कोएम

@FrancescoMM - थोड़ा "शोर", लेकिन आप "मार्जिन-चौड़ाई" पारदर्शी बॉर्डर (और कोई मार्जिन नहीं है) के साथ एक बॉक्स बना सकते हैं और उस जगह के अंदर एक बॉक्स जिसकी चौड़ाई आप चाहते हैं (दिखाई फिर से नहीं) मार्जिन)

— पंचो

मैं इस तरह की सोच का पालन नहीं कर सकता। क्या यह कहने से अधिक स्वाभाविक है कि मुझे दो बक्से 1pxअलग चाहिए, प्रत्येक 50%को उपलब्ध स्थान लेना चाहिए? ठीक margin-boxऐसा ही होगा। या मार्जिन बॉक्स को भूल जाएं और उपलब्ध स्थान के बारे में सोचें। 50% मूल कंटेनर नहीं है, लेकिन जो बचा है उसका 50%। नो "कैल्क", नो "5% मार्जिन", नो मेस ...

— माॅर्टिनस

Answer 9

शरीर की सामग्री के अंदर बॉक्स-आकार का उपयोग करते समय दिलचस्प स्थिति

कोई भी कंटेंट नो बॉर्डर बॉक्स इस दो बॉक्स रिकॉर्पोरेट अल्गोरिथम के बाएं-दाएं मार्जिन% रिकाउंट पर कोई मूल्य नहीं देता है

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

57 से पहले के फ़ायरफ़ॉक्स संस्करणों ने भी बॉक्स-साइज़िंग के लिए पैडिंग-बॉक्स वैल्यू का समर्थन किया था, हालांकि यह मान ब्राउज़र के विनिर्देश और बाद के संस्करणों से हटा दिया गया था।

तो मार्जिन-बॉक्स की भी योजना नहीं ...