How to remove the margin at the top of my page


Tags: html,css,html5,css3,margin

Problem :

I want to delete the margin top of my page. I will show you what I mean with a screenshotenter image description here

You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin? I post here my css:

div#header {
    background-color: #6495ED;
    background: -moz-linear-gradient(100% 100% 90deg, black, gray);
    background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
    margin: 0px;
    width: 100%;
}
body {
    background-color: #000000;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
h1 {
    text-align: center;
    color: #FFFFFF;
    font-family:  sans-serif;
    font-size: 26px;
    font-weight: bold;
    padding: 5px;
}
ul {
    list-style-type: none;
    padding: 5px;
}

li {
    color: #FFFFFF;
    font-family: sans-serif;
}

p {
    color: #FFFFFF;
    font-family: sans-serif;
    padding: 5px;
}
a {
    text-decoration: none;
    color: #FFFFFF;
}

So any suggestion about how I can delete this margin just above my header?

Here you can see my html:

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>  
        <title>Lista coupon</title>
        <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="../js/memoria.js"          type="text/javascript"></script>
        <style  src="../css/style.css"          type="text/css"></style>
    </head>
    <body onload="loadJson();">
        <div id="header">
            <h1>Lista coupon salvati</h1>
        </div>
        <div id="content">
            <p>Di seguito trovi tutte le promozioni salvate</p>
            <div id="list">
            </div>          
        </div>
        <div id="footer">

        </div>
    </body>
</html>


Solution :

Set margin: 0; to <h1> element

Demo: http://jsfiddle.net/5w6Es/

Same problem as with the margin-left of <ul> elements, or margin-top / margin-bottom of <p> elements, etc.

You need to reset their default styles when using them at the borders of your page.


    CSS Howto..

    How do I make my footer sit at the bottom of my content?

    How to apply inverse text mask with CSS

    How to change styling of a specific div onhover of another element when divs share an id

    JS+CSS How to display images from an array from top right to bottom left

    How can I style the current (today's date) in bold font?

    How to pause or delay animation using JavaScript/jquery

    Show separation between newlines in textarea

    How to adapt CSS image container to different browser sizes

    How to make my phone number bold using css [closed]

    How to select odd child of dl element with css?

    How to position the scaled elements (jQuery, css)

    How to output element.style.marginTop using digits only?

    How to create a drop down menu like the one in this picture

    How do I add a logo into the nav bar in CSS?

    How do i enable hover effect on an image if the text before it is hovered?

    How to check image is visible (Webdriver)

    How to modify how TinyMCE format text

    How do I center my responsive form and align it evenly with everything else?

    How do stop elements from changing (properties) during javascript events?

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How can i make this css star smaller?

    A CSS question: why is the Facebook Share button often styled as “icon” + text to fake as a button, and how to do it well?

    css float: left clash/collision, how to avoid?

    How to create a slanting border with css

    How to rotate a picture using css and javascript

    How do I overwrite certain conditions when you have two CSS files?

    How to align images and urls within div trees in CSS?

    CSS - Superfish, how to float 4th level of dropdown

    css show separator icon for icons

    How to repeat a CSS shape horizontally?