Annoying space above header won't leave

Question

I've already did margin and padding to 0 but can't get it.

I'm a beginner in css and html and I know this question has been asked before but I've already seen the questions and none of them helped. This is the JSfiddle. JsFiddle

   ------< HTML Code---->

 <div id = "header">
        <h1>{Title}</h1>

        {block:Description}
            <p id="description">{Description}</p>
        {/block:Description}
</div>
        <ol id="posts">
            {block:Posts}
                {block:Text}
                    <li class="post text">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </li>
                {/block:Text}

                {block:Photo}
                    <li class="post photo">
                        <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photo}

                {block:Panorama}
                    <li class="post panorama">
                        {LinkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {LinkCloseTag}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Panorama}

                {block:Photoset}
                    <li class="post photoset">
                        {Photoset-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photoset}

                {block:Quote}
                    <li class="post quote">
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </li>
                {/block:Quote}

                {block:Link}
                    <li class="post link">
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </li>
                {/block:Link}

                {block:Chat}
                    <li class="post chat">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </li>
                {/block:Chat}

                {block:Video}
                    <li class="post video">
                        {Video-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Video}

                {block:Audio}
                    <li class="post audio">
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Audio}
            {/block:Posts}
        </ol>




    <------CSS----------->

body { margin: 0px; padding: 0px;}

#header {background-color:red;}

score 2 · Answer 1 · answered Feb 26 '13 at 03:24

2

The top margin of your h1 is the cause. #header h1 { margin-top: 0; } will get rid of it.

answered Feb 26 '13 at 03:24

Daiz

328
2
6

score 1 · Accepted Answer · answered Feb 26 '13 at 03:23

1

Your heading one has a inherited margin on it. in your CSS:

#header H1 { margin: 0; }

answered Feb 26 '13 at 03:23

im_benton

2,541
4
21
30

Yeah sometimes there are default properties on elements you need to add. An easy way is to use the "*" element. like * { margin: 0; Padding: 0; } etc. – im_benton Feb 27 '13 at 15:25

score 1 · Answer 3 · answered Feb 26 '13 at 04:34

1

It always help to use a reset stylesheet before your styles. I use the Eric Meyer's reset http://www.cssreset.com/scripts/eric-meyer-reset-css/. This way you never have to worry about margin and padding you never added.

answered Feb 26 '13 at 04:34

sroy

811
7
9

score 1 · Answer 4 · answered Feb 26 '13 at 05:09

1

You need to RESET your DEFAULT browser style by:

html,body,head,a,h1,h2,h3,h4,h5,h6,h7,pre,sup,sub { margin: 0px; padding: 0px;}

answered Feb 26 '13 at 05:09

Akshay Khandelwal

1,570
11
19

stop laughing at me · Answer 5 · 2013-02-27T22:07:13.930

0

body { margin: 0px; padding: 0px;}

#header h1 {background-color:red;

margin: 0px; padding: 0px;}

edited Feb 27 '13 at 22:07

answered Feb 27 '13 at 03:20

stop laughing at me

35
1
5

Annoying space above header won't leave

5 Answers5