Why is there a margin above my image even thoughI I've set it to 0px?

Question

There seems to be a margin above my image although I haven't set it that way.

I've even tried setting margin-top to 0, but this doesn't fix it.

#header {
  background-image: url(https://s3-eu-west-2.amazonaws.com/theartonlinegallery-wp/wp-content/uploads/20180627134442/london-cityscape.jpg);
  background-repeat: no-repeat;
  height: 350px;
  background-position-x: 100%;
  background-posititon-y: 75%;
  background-size: 1400px;
  opacity: 0.8;
  text-align: center;
  font-family: "Poiret One";
  color: white;
  margin-top: 0px;
}

<div id="header">
  <h1>Investment Blog</h1>
</div>

Answer 1

If you run the code snippet you posted and look at the computed styles, you'll see that while the div does indeed have a margin-top of 0, the h1 block containing "Investment Blog" inside of it does NOT have a margin-top of 0. You'll have to do additional styles for the title.

Answer 2

It's because the body tag has default values that you don't see. Try to add body { margin:0px; padding:0px; } to your CSS file and it will set the default padding and margin to 0.

Answer 3

You need to set margin to 0 for both the body and the h1, like:

   body,
   #header h1 {
      margin-top: 0;
   }