मैं शीर्षलेख के ऊपर स्थान कैसे हटा सकता हूं?

Question

मैं एक वेबसाइट बना रहा हूँ। मैंने HTML भाग लिखा है और अब मैं स्टाइलशीट लिख रहा हूं। लेकिन मेरे हेडर के बारे में हमेशा कुछ जगह है। मैं इसे हटा नहीं सकता। किसी भी सहायता की सराहना की जाएगी। अग्रिम में धन्यवाद। मेरा एचटीएमएल और सीएसएस कोड नीचे दिया गया है।

<header> 
<h1>OQ Online Judge</h1> 
<form action="<?php echo base_url();?>/index.php/base/si" method="post"> 
    <label for="email1">E-mail : </label><input type="text" name="email" id="email1"> 
    <label for="password1">Password : </label><input type="password" name="password" id="password1"> 
    <input type="submit" name="submit" value="Login"> 
</form> 
</header> 

यह मेरा HTML कोड है।

body{ 
margin: 0px; 
padding: 0px; 
} 
header{ 
margin: 0px; 
padding: 0px; 
height: 20em; 
background-color: #C0C0C0; 
} 

यह मेरा सीएसएस कोड है।

Answer 1

प्रयास करें:

h1 { 
    margin-top: 0; 
} 

आप margin collapsing के प्रभाव को देख रहे हैं।

Answer 2

कोशिश मार्जिन टॉप:

<header style="margin-top: -20px;"> 
    ... 

संपादित करें:

अब मैं रिश्तेदार की स्थिति शायद एक बेहतर विकल्प मिल गया:

<header style="position: relative; top: -20px;"> 
    ... 

Answer 3

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

* { margin: 0, padding: 0 } 

यह मार्जिन और सभी तत्वों के paddings कर देगा जो 0 होता है, और उसके बाद आप उन्हें शैली के रूप में आप चाहते हैं कर सकते हैं क्योंकि प्रत्येक ब्राउज़र एक अलग डिफ़ॉल्ट मार्जिन और padding है: तो मैं सिर्फ सरल करने के लिए प्रारंभ पर की सिफारिश तत्वों का।

Answer 4

शायद यह h1 टैग समस्या का कारण बनता है। margin: 0; को लागू करने से समस्या ठीक होनी चाहिए।

लेकिन आपको ब्राउज़र की स्थिरताओं और आपके जैसी समस्याओं को खत्म करने के लिए हर नई परियोजना के लिए एक सीएसएस रीसेट का उपयोग करना चाहिए। http://meyerweb.com/eric/tools/css/reset/

Answer 5

अप्रत्याशित मार्जिन और भविष्य में अन्य ब्राउज़र-विशिष्ट व्यवहार को रोकने के लिए, मैं अपने स्टाइलशीट में reset.css शामिल करने के लिए सलाह देते हैं: शायद सबसे प्रसिद्ध एक एरिक मेयर की है।

ध्यान रखें कि आपको एच [1..6] फ़ॉन्ट आकार और वजन सेट करना होगा ताकि शीर्षलेख उसके बाद फिर से शीर्षलेख की तरह दिख सकें, और कई अन्य चीजें।

Answer 6

मैंने सीमा जोड़कर अंतरिक्ष समस्या हल की और नकारात्मक मार्जिन सेट करके हटा दिया। पता नहीं है कि अंतर्निहित समस्या क्या है।

header { 
    border-top: 1px solid gold !important; 
    margin-top: -1px !important; 
} 

Answer 7

बस संपूर्णता के लिए

, auto/hidden करने के लिए overflow बदलते भी चाल करना चाहिए।

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

 
header { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 20em; 
 
    background-color: #C0C0C0; 
 
    overflow: auto; 
 
}

<header> 
 
    <h1>OQ Online Judge</h1> 
 

 
    <form action="<?php echo base_url();?>/index.php/base/si" method="post"> 
 
    <label for="email1">E-mail :</label> 
 
    <input type="text" name="email" id="email1"> 
 
    <label for="password1">Password :</label> 
 
    <input type="password" name="password" id="password1"> 
 
    <input type="submit" name="submit" value="Login"> 
 
    </form> 
 
</header>

Answer 8

यह सीएसएस अनुमति क्रोम और फ़ायरफ़ॉक्स सामान्य रूप से अपने पन्ने पर अन्य सभी तत्वों को प्रस्तुत करना है और मेरे H1 टैग ऊपर मार्जिन हटाने के लिए। साथ ही, एक पृष्ठ का आकार बदलकर एम पीएक्स से बेहतर काम कर सकता है।

h1 { 
    margin-top: -.3em; 
    margin-bottom: 0em; 
}