CODEWITHSUNDEEP
htmlcssmargin
lucgian84
lucgian84

Reputation: 843

How to remove the margin at the top of my page

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>

Upvotes: 4

Views: 9542

Answers (6)

samtruss1986
samtruss1986

Reputation: 13

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.

Upvotes: 0

Ankit Jain
Ankit Jain

Reputation: 1286

Try This

h1
{
     margin:0px;
}

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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;  
}

Upvotes: 3

Keith
Keith

Reputation: 4147

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;
}

Upvotes: 2

Andrea Ligios
Andrea Ligios

Reputation: 50203

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.

Upvotes: 6

Andiih
Andiih

Reputation: 12413

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.

Upvotes: 1

Related Questions