Question 160994 in Html Question posted in
Some basic documentation can be found here.

Why can’t I get rid of whitespace above my block on website?

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

Tags:

2

Answers


  1. 0

    Try removing the div with the class of block1 and see if that makes a difference. If doing that removes the white space, then at least you know where the problem lies.

    I think you add the background image css to the body tag directly in your css. Adding a div tag to do that seems unnecessary.

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search