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

132

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

धन्यवाद।

स्रोत

2011-01-15 Jake

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

283

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

आप valid markup साथ आईई का आधुनिक संस्करण का उपयोग करते हैं, एक good doctype, और appropriate headers यह मानक का पालन करना होगा। अन्यथा, आप के माध्यम से "सीमा-बॉक्स" का उपयोग करने के आधुनिक मानकों संगत ब्राउज़रों के लिए मजबूर कर सकते हैं:

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

पहले घोषणा ओपेरा के लिए आवश्यक है, दूसरा, Firefox के लिए है तीसरे वेबकिट और क्रोम के लिए है। http://phrogz.net/CSS/boxsizing.html

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

यहाँ एक साधारण परीक्षण मैं साल पहले परीक्षण क्या बॉक्स आकार घोषणा आपके ब्राउज़र का समर्थन करता है के लिए बनाया है।

स्रोत

2011-01-15 04:59:55 Phrogz

+1। हालांकि मतभेदों पर विस्तार करना चाहते हैं। – BoltClock

@ बोल्टक्लॉक अधिक कठोर उत्तर देने के लिए उत्साह के लिए धन्यवाद। अपडेट किया गया। – Phrogz

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

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

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

स्रोत

2011-01-15 04:59:44 shankhan

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

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

<!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>

स्रोत

2011-01-15 15:28:23 tybro0103

मैं इस सवाल से टकरा गई और फिर भी यह वर्ष कुछ साल है, मैं मैं जोड़ सकते हैं इस मामले में किसी को भी इस धागे में मुलाकात सोचा।

CSS3 अब एक बॉक्स आकार देने वाली संपत्ति है। यदि आप सेट करते हैं, तो

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

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

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

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

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

स्रोत

2014-02-10 17:36:09

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

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

उत्तर

संबंधित मुद्दे