lucgian84 lucgian84 - 4 months ago 8
CSS Question

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>

Answer

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.