सीएसएस: मैं डिफ़ॉल्ट विंडो "पैडिंग" से कैसे छुटकारा पा सकता हूं? 100% चौड़ाई के लिए सेट एक तत्व खिड़की की सीमाओं तक नहीं पहुंचता

तो मैं एक तत्व है जो सीधे शरीर के अंदर रख दिया गया है है:सीएसएस: मैं डिफ़ॉल्ट विंडो "पैडिंग" से कैसे छुटकारा पा सकता हूं? 100% चौड़ाई के लिए सेट एक तत्व खिड़की की सीमाओं तक नहीं पहुंचता

body{ 
    text-align:center; 
} 
#header{ 
    margin:auto; 
}

तो:

<body> 
    <div id="header">Some stuff...</div> 
    Other stuff... 
</body>

निम्नलिखित इस्तेमाल किया सीएसएस है #header div 100% चौड़ाई (डिफ़ॉल्ट) पर सेट है और केंद्रित है। समस्या है, वहाँ खिड़की सीमा और #header तत्व के बीच एक "अंतरिक्ष" ... जैसा:

| |----header----| | 
^window border  ^window border

मैं जावास्क्रिप्ट के साथ एडजस्ट करने की कोशिश की है, और इसे सफलतापूर्वक सटीक खिड़की चौड़ाई के तत्व का आकार बदलता है, लेकिन यह को खत्म नहीं करता है "अंतरिक्ष":

$('#header').width($(window).width());

एक समाधान निम्नलिखित सीएसएस नियम जोड़ने के लिए हो रहा है (और ऊपर जावास्क्रिप्ट रखने के लिए): इस "अंतरिक्ष"

#header{ 
    margin:auto; 
    position:relative; 
    top:-8px; 
    left:-8px; 
}

अपने ब्राउज़र में है 8px - लेकिन मुझे यकीन नहीं है कि यह सभी ब्राउज़रों में समान है? मैं उबंटू पर फ़ायरफ़ॉक्स का उपयोग कर रहा हूं ...

तो इस जगह से छुटकारा पाने का सही तरीका क्या है - और यदि मैंने उपर्युक्त उपयोग किया है, तो क्या सभी ब्राउज़र समान कार्य करते हैं?

स्रोत

2010-12-31 Alex

body, सभी ब्राउज़रों पर डिफ़ॉल्ट मार्जिन है तो तुम सब करने की जरूरत है उन्हें बंद दाढ़ी है:

body { 
    margin: 0; 
    text-align: center; 
}

फिर आप #header से नकारात्मक हाशिए निकाल सकते हैं।

स्रोत

2010-12-31 12:55:25 BoltClock

ओह, मैंने शरीर के पैडिंग को हटाने की कोशिश की, लेकिन मैंने मार्जिन के बारे में नहीं सोचा था ... मैंने सोचा था कि शरीर खिड़की के समान ही था, और उनकी "सीमाएं" जहां एक ही स्थान पर स्थित थीं। .. मुझे नहीं पता कि यह समझ में आता है। ^^ वैसे भी धन्यवाद! – Alex

@Alex: तत्व जो ब्राउज़र व्यूपोर्ट * (इसलिए बोलने के लिए) से अधिक संबंधित है, 'html' है, न कि 'body'। [यह उत्तर] देखें (http: // stackoverflow।कॉम/प्रश्न/4565 9 42/चाहिए-ग्लोबल-सीएसएस-स्टाइल-ऑन-द-एचटीएमएल-एलिमेंट-या-द-बॉडी-एलिमेंट/4565 9 5 9 # 4565 9 5 9) और अधिक के लिए। – BoltClock

body में style टैग करने के लिए इन जोड़ें, के बाद एक तरह:

body { margin:0px; padding:0px; }

यह मेरे लिए काम किया। सौभाग्य!!

स्रोत

2012-12-21 07:15:35 Tharindulucky

इस समस्या को हल करने का एक आसान तरीका सभी मार्जिन से छुटकारा पा रहा है। और अगर आप ऐसा कर सकते हैं निम्नलिखित कोड द्वारा:

* { 
    margin:0; 
}

इस समस्या का समाधान होगा और आप सभी तत्वों के हाशिये पर बेहतर नियंत्रण दे देंगे।

स्रोत

2013-08-28 02:59:07 Bups

यह ध्यान दिया जाना चाहिए कि यह एक ओवरकिल समाधान है और कुछ मामलों में धीमा हो सकता है। –

मुझे पता चला कि बॉडी मार्जिन को शून्य पर सेट करते समय भी यह समस्या जारी रही।

हालांकि यह पता चला है कि एक आसान फिक्स है। आपको बस इतना करना है कि अपने हेडर टैग को 1 पीएक्स सीमा दें, साथ ही बॉडी मार्जिन को शून्य पर सेट करें, जैसा कि नीचे दिखाया गया है।

body { margin:0px; } 

header { border:1px black solid; }

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

स्रोत

2015-11-02 12:13:13 wardheed

उत्तर

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