1

First timer here. Could someone please tell me why there are margins around the header? How can I fix it?

jsfiddle: http://jsfiddle.net/lauriecai/39J2B/3/

header {
width: 100%;
height: 100px;
background-color: #fff;
}
lolrie
  • 79
  • 5

4 Answers4

1

When posting to SO, you generally want to put your code into a

fiddle,

since it gives everyone the ability to easily access the code you've already written/attempted. Images are both tedious and difficult to work with and will probably deter people from helping you. I'd try to avoid them when you want to post code.

Nevertheless, the actual answer to your question:

If you want to remove all padding and margins, you should add the following CSS to your index.css file:

html, body {
    padding: 0px;
    margin: 0px;
}
Community
  • 1
  • 1
royhowie
  • 11,075
  • 14
  • 50
  • 67
  • Ah, I see. Thanks for the advice! I've just created one and set up the code. Would I just post as a link? (http://jsfiddle.net/lauriecai/39J2B/)? – lolrie May 01 '14 at 04:21
  • @Laurie Yes. If possible always post in a fiddle. It helps us help you better. A direct link is fine. – Liftoff May 01 '14 at 04:28
1

There are actually two things at work here.

1. Body margins

By default, the body has margins of around 5px(ish). Most of the answers on here have already covered that. You can fix it by setting them to 0;

body
{
    margin: 0;
}

2. <h1> ALSO has margins

Your header is being pushed down by the margins on your <h1> element. Remove the top margins to fix it.

h1
{
    margin-top: 0;
}

Updated JSFiddle

Community
  • 1
  • 1
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • Thanks! This got rid of the top margin. I didn't set any margins for

    though. Does everything have margins until you specify them to 0?

     – lolrie May 01 '14 at 04:40
  • @Laurie No. Only certain elements have default margins. [**See this question for more**](http://stackoverflow.com/questions/9428820/what-html-elements-might-have-browser-set-default-padding-margin) and please accept my answer if it answered your question. – Liftoff May 01 '14 at 06:11
0
<body>
<header>
<a href="index.html">
<h1>LAURIE</h1>
<h2>DESIGNER</h2>
</a>
</header>
</body>

css

/*general*/

body{
margin: 0;
padding: 0;
}

or

*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

also position: absolute;

alessandrio
  • 4,282
  • 2
  • 29
  • 40
0

<style> html, body { margin: 0; padding: 0; } </style>

JRulle
  • 7,448
  • 6
  • 39
  • 61