सीएसएस की चौड़ाई में पैडिंग शामिल है?

146

ऐसा लगता है कि IE में, चौड़ाई में पैडिंग आकार शामिल है। जबकि एफएफ में, चौड़ाई नहीं है। मैं दोनों को समान कैसे बना सकता हूं?

धन्यवाद।

css

— जेक
स्रोत

आपको शायद मानकों-अनुरूप मोड को सक्रिय करने की आवश्यकता है। हालांकि, कुछ कोड देखे बिना, मैं आपको इससे अधिक मार्गदर्शन नहीं दे सकता।

— जेफ हबार्ड

307

IE अधिक सुविधाजनक-लेकिन-गैर-मानक "बॉर्डर-बॉक्स" बॉक्स मॉडल का उपयोग करता था। इस मॉडल में, एक तत्व की चौड़ाई में पैडिंग और बॉर्डर शामिल हैं। उदाहरण के लिए: चौड़ा
#foo { width: 10em; padding: 2em; border: 1em; }
होगा 10em।
इसके विपरीत, सभी मानक-डराने वाले ब्राउज़र "सामग्री-बॉक्स" बॉक्स मॉडल के लिए डिफ़ॉल्ट होते हैं । इस मॉडल में, किसी तत्व की चौड़ाई में पैडिंग या बॉर्डर शामिल नहीं हैं। उदाहरण के लिए:
#foo { width: 10em; padding: 2em; border: 1em; }
वास्तव में 16emचौड़ा होगा: प्रत्येक पक्ष के लिए 10em+ 2emपैडिंग, 1emप्रत्येक किनारे के लिए सीमा।

यदि आप IE का एक आधुनिक संस्करण मान्य मार्कअप , एक अच्छा सिद्धांत , और उपयुक्त हेडर के साथ उपयोग करते हैं तो यह मानक का पालन करेगा। अन्यथा, आप "बॉर्डर-बॉक्स" का उपयोग करने के लिए आधुनिक मानकों के अनुरूप ब्राउज़रों को बाध्य कर सकते हैं:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

पहला घोषणा ओपेरा के लिए आवश्यक है, दूसरा फ़ायरफ़ॉक्स के लिए और तीसरा वेबकिट और क्रोम के लिए है।

आपके ब्राउज़र का समर्थन करने वाले बॉक्स-आकार की घोषणा का परीक्षण करने के लिए मैंने वर्षों पहले एक सरल परीक्षण किया है: http://phrogz.net/CSS/boxfizing.html

ध्यान दें कि वेबकिट (सफारी और क्रोम) समर्थन नहीं करते हैं padding-box किसी भी घोषणा के माध्यम से बॉक्स मॉडल का ।

— Phrogz
स्रोत

2

सामग्री बॉक्स और बॉर्डर बॉक्स मॉडल दोनों का उल्लेख करने के लिए +1। मतभेदों पर विस्तार से बताना चाह सकते हैं।

— BoltClock

1

@BoltClock अधिक सख्ती से जवाब देने के लिए प्रोत्साहन के लिए धन्यवाद। अपडेट किया गया।

— फ्रॉग्ज

अच्छा उत्तर; मैं कुछ दिनों के लिए अलग-अलग विकल्पों के नामों को याद करने (या खोजने) की कोशिश कर रहा हूं ... +1 =)

— डेविड कहते हैं कि मोनिका

किसी को भी ओपेरा की परवाह नहीं है।

— माइकल जे। कैलकिंस

3

@whitelettersinblankpapers देखें कि W3Schools बेकार क्यों है और फिर एक बेहतर संदर्भ जो आपको W3C मानक की ओर ले जाता है । W3Schools के किसी भी अधिक लिंक का पालन न करें। इसके अलावा, भविष्य में वेब मानकों के बारे में अपने खोज इंजन प्रश्नों में "एमडीएन" जोड़ें।

— फ्रॉग्ज

27

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

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— shankhan
स्रोत

मैं इस पद्धति का उपयोग नियमित रूप से करता हूं और इसके साथ कभी भी क्रॉस ब्राउज़र समस्याएँ नहीं होती हैं।

— केविन बील

20

मैं इस सवाल से टकरा गया और भले ही यह कुछ साल पुराना है, मैंने सोचा कि अगर कोई इस धागे में टकरा जाए तो मैं इसे जोड़ सकता हूं।

CSS3 में अब एक बॉक्स-आकार की संपत्ति है। यदि आप कहते हैं,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

आपकी क्लास 1030px के बजाय 1000px चौड़ी होगी। यह निश्चित रूप से, तरल डिव के साथ पिक्सेल आकार की सीमा का उपयोग करने वाले किसी भी व्यक्ति के लिए अविश्वसनीय रूप से उपयोगी है, क्योंकि यह अन्यथा अघुलनशील समस्या को हल करता है।

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

मुझे ब्राउज़र सिंटैक्स की वर्तमान स्थिति का यकीन नहीं है, लेकिन मैं अभी भी -moz और -webkit उपसर्ग शामिल करता हूं:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— मेसन बरगे
स्रोत

हां, और पॉल आयरिश ने इस बारे में एक अच्छा ब्लॉग लेख यहां दिया है: paulirish.com/2012/box-sizing-border-box-ftw

— डेव बर्टन

3 साल पहले जो स्वीकार किया गया था, उसी के उत्तर के रूप में इस उत्तर में कितने उत्थान हैं?

— डिप्स

1

क्या आपके पास एक सिद्धांत घोषित है? जब मैंने html कोडिंग शुरू की तो मुझे यह समस्या थी, और यह घोषित किए गए सिद्धांत नहीं होने से था। मेरी पसंदीदा है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
स्रोत

1

उन लोगों के लिए जो अभी भी समस्या है, jQuery ने दो संपत्ति प्रदान की outerWidth ()और किसी सीमा के साथ या बिना किसी वस्तु innerWitdh ()की चौड़ाई जानने के लिए ...

— पैट्रिक
स्रोत