किसी तत्व की चौड़ाई/ऊंचाई

Question

से नीचे आती है, जहां मैं फ़ायरफ़ॉक्स डोम इंस्पेक्टर में अपने HTML की जांच करते समय यह हर समय देखता हूं।

तत्व की वास्तविक चौड़ाई (इस मामले में 1170px) माना जाता है कि चयनित नियम से मेल नहीं खाता (750px)। मुझे पता चला कि यह max-width नियम के कारण हो सकता है, लेकिन इस मामले में max-width नहीं है। मुझे लगता है कि वहां कोई मीडिया क्वेरी या कुछ अन्य अजीब नियम है जो इसके लिए ज़िम्मेदार है। क्या फ़ायरफ़ॉक्स या क्रोम या जो भी देव कंसोल का उपयोग किसी भी स्थान पर तत्व की चौड़ाई/ऊंचाई को प्रभावित करने वाले सभी नियमों का सारांश प्राप्त करने का कोई तरीका है?

Answer 1

एक तत्व की चौड़ाई विभिन्न प्रकार के कारकों से प्रभावित हो सकती है, और यह देखने का सबसे अच्छा तरीका है कि इसमें क्या योगदान है, सबसे पहले अपने इंस्पेक्टर में 'बॉक्स मॉडल' टैब को देखना है। आप कुछ इस तरह देखना चाहिए:

यहाँ, आप तत्व के आकार के प्रत्येक घटक के विश्लेषण देख सकते हैं। केंद्र बॉक्स तत्व के आधार आकार को इंगित करता है। लगभग सभी मामलों में, यदि आपने अपने सीएसएस में width नियम सेट किया है, तो आपको वही नंबर यहां देखना चाहिए; यदि आप नहीं करते हैं, तो आपको तत्व के बच्चों का निरीक्षण करना शुरू करना चाहिए, यह देखने के लिए कि क्या आपके बच्चे आपके width संपत्ति के लिए निर्दिष्ट संख्या से अधिक व्यापक हैं, क्योंकि उनके माता-पिता का विस्तार करने वाले बच्चे एक आम समस्या/अप्रत्याशित परिणाम हैं।

आप यहाँ वही नंबर दिखाई निर्दिष्ट किया गया है, तो बड़ा चौड़ाई padding/margin/तत्व की border से आ रही है, तो आप अपनी शैली नियमों के माध्यम से जाँच को देखने के लिए आप क्या निर्धारित किया है शुरू कर देना चाहिए DO हैं उन गुणों के लिए, और कहां।

साथ ही, मन जो box-sizing विधि का प्रयोग कर रहे हैं पर निर्भर करता, तत्व की कुल चौड़ाई उन गुणों से गणना की जाएगी, जो भिन्न .. उदाहरण के लिए, यदि आप box-sizing: border-box; की स्थापना की है में रखने के लिए, और आप इन शैली नियम लागू होते हैं:

div { 
    width: 500px; 
    padding: 100px; 
    border: 5px solid black; 
} 

आप इस प्रकार का बॉक्स मॉडल चार्ट देखेंगे:

ध्यान दें कि आधार चौड़ाई संख्यानहीं है 0 अब padding और border नियम अब चौड़ाई में योगदान देते हैं। तो जब आप चौड़ाई निर्दिष्ट करते हैं, तो यह उन सभी गुणों की कुल चौड़ाई होगी, और आपकी आधार चौड़ाई केवल शेषया border गुणों द्वारा उपभोग नहीं की जाएगी।

मुझे उम्मीद है कि मदद करता है, अगर आपको कुछ भी स्पष्टीकरण चाहिए तो मुझे बताएं।