Search code examples
htmlcssweb

Why Can't I get rid of the white space above my block on the website? Something to do with <body>?

Before anything else, I'm very new to html/css, and this is probably the easiest fix ever, but I can't seem to find it. also apologies if I formatted the code wrong, some people are using js fiddle but if someone could also explain how that works, that would be greatly appreciated!

Please look at image for context

.block1{
    display: block;
    background: url(images/cute\ penguins.png);
    background-repeat: no-repeat;
    block-size: 1080px;
   padding: 0px;
    
   
    
}
.company-logo{
    width: 140px;
    
    position: absolute; 
    left: 190px;
    
    

}


body{
  
   margin: 0;
 
}


#title{
    text-align: center;
    position: relative; top: 150px;
    margin-top: 100px;
    font-size: 50px;
    font-family: UniSansHeavy;
}
.Flow{
    color: rgba(94, 8, 255, 0.664);
    letter-spacing: 2px;
    
}

@font-face {
    font-family: UniSansHeavy;
    src: url(Uni\ Sans\ Heavy.otf);
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css">
    <title>PenguinFlow- We'll Make Your Business Flow.</title>
    <link rel="icon" type="image/x-icon" href="images/pgfavicon.ico"
</head>
<body>
    <div class="block1">
        <img class="company-logo" src="images/Option 3.png">
        <h1 id="title"> We'll Make Your Business <span class="Flow">Flow.</span></h1>
    </div>
    </div>
    
</body>
</html>

So you can see in the image above there is white space above my image. I thought it because has some default margins to get rid of, so tried setting the body's margin to 0 but that doesn't do anything

weirdly if I set the padding of the "block 1" that contains all the elements of the first block to just 1px, it gets rid of it, which makes no sense must be some default margins of the body that I cant change or something

So you can see in the image above there is white space above my image. I thought it because has some default margins to get rid of, so tried setting the body's margin to 0 but that doesn't do anything

weirdly if I set the padding of the "block 1" that contains all the elements of the first block to just 1px, it gets rid of it, which makes no sense must be some default margins of the body that I cant change or something

Solution

  • It appears that the default margin of the h1 element inside the block1 container is what's responsible for the white space above your image. To remove the margin from the h1 element, add the following code to your CSS file:

    #title {
  margin-top: 0;
}