css - tutorial - सीएसएस क्या चौड़ाई पैडिंग शामिल है?




types of css (3)

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

धन्यवाद।


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

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

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

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

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

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

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

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

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

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

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





css