h1 creates unwanted space above the text

Question

I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).

The problem is that I get an unwanted extra space above the body as you can see in this picture. If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?

Any help will be appreciated, thanks!

Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again

Answer 1

A h1 element has margin by default. Simply remove it by adding:

margin: 0;

To the styles for your h1 element.

Answer 2

you can use this:

<h1 style="margin-top:0px; padding-top:0px">some text</h1>

Answer 3

At start of your work you should clear the style for margin (browser apply some of them). So just in start of css file write:

h1 { 
  margin: 0;
}

A lot of devs just start a css file like :

* {
 margin: 0;
 padding: 0;
}

for clear it :) Also you should read something about css reset and css normalize :)

Answer 4

This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.