How to remove the margin at the top of my page

Question

I want to delete the margin top of my page. I will show you what I mean with a screenshot enter 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>

I will post my html, sorry – lucgian84 Jul 30 '13 at 12:49 — lucgian84, Jul 30 '13 at 12:49
Please see my comment in similar thread – Jakub Sawczuk Oct 06 '15 at 11:30 — Jakub Sawczuk, Oct 06 '15 at 11:30

score 6 · Accepted Answer · answered Jul 30 '13 at 12:56

6

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.

answered Jul 30 '13 at 12:56

Andrea Ligios

49,480
26
114
243

1

Your solution works better than other I will use yours thank you! – lucgian84 Jul 30 '13 at 12:57

Fabrizio Calderan · Answer 2 · 2013-07-30T12:59:12.727

3

Try removing padding and margin also for the html element, (not only the body)

Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element

html {
   margin: 0; 
   padding: 0;
}

h1 {
   ...
   margin: 0;  
}

edited Jul 30 '13 at 12:59

answered Jul 30 '13 at 12:49

Fabrizio Calderan

120,726
26
164
177

fill a fiddle reproducing the problem, with your real markup. anyway this really seems a problem related to collapsing margin of your main title: http://www.w3.org/TR/CSS2/box.html#collapsing-margins – Fabrizio Calderan Jul 30 '13 at 12:52
`+1` Without a CSS nuller, headings have by default a margin, setting it to '0' is the correct way to go. Tested and (of course) works. – Roko C. Buljan Jul 30 '13 at 12:58
@RokoC.Buljan thank you. the problem here is also due to the margin that is applied not the title but apparently applied to the parent container. That's why an *easy-n-dirty* solution is to apply a negative margin to the header as suggested below. But I wouldn't never recommend it. – Fabrizio Calderan Jul 30 '13 at 13:01

score 2 · Answer 3 · answered Jul 30 '13 at 12:56

2

You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/

h1 {
    text-align: center;
    color: #FFFFFF;
    font-family:  sans-serif;
    font-size: 26px;
    font-weight: bold;
    padding: 5px;
    margin:0px;
}

answered Jul 30 '13 at 12:56

Keith

4,059
2
32
56

score 1 · Answer 4 · answered Jul 30 '13 at 12:48

1

You don't say what browsers its occuring in.

If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.

answered Jul 30 '13 at 12:48

Andiih

12,285
10
57
88

I'm using Firefox (Gecko engine) and Chrome/Safari (WebKit) – lucgian84 Jul 30 '13 at 12:56

score 1 · Answer 5 · answered Jul 30 '13 at 12:59

1

Try This

h1
{
     margin:0px;
}

answered Jul 30 '13 at 12:59

Ankit Jain

1,226
1
10
17

score 0 · Answer 6 · answered Jul 28 '16 at 13:15

The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.

So an example using your mark up above would be

h1:first-child { margin-top: 0; }

This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.

I hope this helps as I was having the sam problem with little luck with the answers provided.

How to remove the margin at the top of my page

6 Answers6