2012-03-03 21 views
16

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

यहाँ कोड है:

Extra space around a div element

मैं:

<html> 
<head> 
    <style type="text/css"> 
     #header_div { 
      background: #0A62AA; 
      height: 64px; 
      min-width: 500px; 
     } 
     #vipcentral_logo { float:left; margin: 0 0 0 0; } 
     #intel_logo  { float:right; margin: 0 0 0 0; } 
    </style> 
</head> 
<body> 
    <div id="header_div"> 
     <img src="header_logo.png" id="vipcentral_logo"> 
     <img src="intel_logo.png" id="intel_logo"/> 
    </div> 
</body> 

यह यह क्या लगता है कि (मैं लाल तीर डाला स्पष्ट रूप से अतिरिक्त जगह बाहर कॉल करने के लिए) है ब्लू रंग सीधे ब्राउज़र किनारों और टूलबार पर पहुंचने की उम्मीद कर रहा था। छवियां बिल्कुल 64 पिक्सेल लंबा हैं और समान पृष्ठभूमि रंग है जो #header_div को सौंपा गया है। कोई भी सूचना अत्यधिक सराहनीय होगी।

body, html{ 
    padding:0; 
    margin:0; 
} 
+0

Google Chrome या फ़ायरफ़ॉक्स वेब-डेवलपर ऐड-ऑन का उपयोग करके अपने तत्व का निरीक्षण करें यह देखने के लिए कि किन शैलियों को लागू किया गया है। यह संभवतः सिर का मार्जिन या पैडिंग या आपके पृष्ठ का HTML तत्व है। –

+0

प्रत्येक तत्व के लिए पृष्ठभूमि रंग को अलग करने के लिए एक स्थान कहां से आ रहा है, यह जानने के लिए एक साधारण युक्ति है। साथ ही तत्वों का निरीक्षण करने के लिए उपकरण का उपयोग ... – kaj

उत्तर

29

body डिफ़ॉल्ट मार्जिन है: http://www.w3.org/TR/CSS2/sample.html

body { margin:0; } /* Remove body margins */ 

या आप इस्तेमाल कर सकते हैं इस उपयोगी वैश्विक रीसेट

* { margin:0; padding:0; box-sizing:border-box; } 

अगर आप चाहते हैं कुछ कम *वैश्विक से:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 

कुछ अन्य सीएसएस रीसेट:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
है & hellip;

+1

आपकी सभी मदद के लिए सभी को धन्यवाद! मैंने इसे "होमरून" समाधान के रूप में पहली बार कोशिश की और यह अच्छी तरह से काम किया। समस्या सुलझ गयी! – Anthony

3

अपने सीएसएस में निम्न विज्ञापन की कोशिश करो।

कुछ ब्राउज़रों में डिफ़ॉल्ट मार्जिन होता है, कुछ डिफ़ॉल्ट पैडिंग होते हैं, और दोनों को शरीर तत्व में पैडिंग के रूप में लागू किया जाता है।

अपने सीएसएस करने के लिए इस जोड़ें:

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

body तत्व के डिफ़ॉल्ट मार्जिन/padding है कि:

7

शरीर टैग से पैडिंग/मार्जिन को हटाने का प्रयास करें।

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

इसके लिए धन्यवाद, मुझे पता है कि यह थोड़ी देर बाद है। यह स्वीकृत उत्तर की तुलना में मेरे लिए बेहतर काम करता है – redeagle47

2

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

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

body { margin:0px; } 

header { border:1px black solid; } 

आप अपने हैडर के भीतर किसी भी H1, H2 टैग आप भी शून्य करने के लिए इन टैग के लिए मार्जिन सेट करने की आवश्यकता होगी है, तो यह किसी भी अतिरिक्त स्थान जो नज़र आ सकते हैं से छुटकारा मिल जाएगा।

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

0

इस

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

साथ जाओ मैं एक ही समस्या थी और मेरी पहली <p> तत्व है जो पेज के शीर्ष पर था और यह भी एक ब्राउज़र वेबकिट डिफ़ॉल्ट मार्जिन था। यह मेरा पूरा div नीचे दबा रहा था जिस पर आप उसी प्रभाव के बारे में बात कर रहे थे, इस पृष्ठ के शीर्ष पर मौजूद किसी भी पाठ-आधारित तत्वों के लिए देखें।

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My Website</title> 
    </head> 
    <body style="margin:0;"> 
     <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh"> 
<p>Text in Paragraph</p> 
     </div> 
    </div> 
    </body> 
</html> 

तो बस सभी बाल तत्वों को न केवल HTML और बॉडी टैग की जांच करना याद रखें।