HTML - CSS(Header)

Question

I started working in html and css and I have an issue. I have the header and it has some space between the browser and the header itself I hope you understand what I am saying. It is just a rectangle on a background.

body{
  background-image:url(bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

header{
  background-color:#000;
  padding: top;
  min-height: 70px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PaginaWeb</title>
    <script src="External_Java.js"></script>
    <link rel="stylesheet" type="text/css" href="Style.css">
     
</head>

<body>

   <header>
       <nav>
           <p>text</p>
        </nav>
    </header>
    
</body>

</html>

score 2 · Accepted Answer · answered Jun 02 '18 at 17:28

The thing is that by default, every browser includes a default padding and margin property. So you need to reset them to zero in order to avoid these kind of issues.

By adding this declaration at the beginning of your script :

* {
    padding:0;
    margin:0;
}

Your'e resetting the padding and margin property of all element, which is what the * stands for.

*{
    margin:0;
    padding:0;
 }


body{
  background-image:url(bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

header{
  background-color:#000;
  padding: 0;
  min-height: 70px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PaginaWeb</title>
    <script src="External_Java.js"></script>
    <link rel="stylesheet" type="text/css" href="Style.css">
     
</head>

<body>

   <header>
       <nav>
           <p>text</p>
        </nav>
    </header>
    
</body>

</html>

You should close the question then ! Glad it helped. – Martin Jun 02 '18 at 17:32 — Martin, Jun 02 '18 at 17:32

score 0 · Answer 2 · answered Jun 02 '18 at 17:27

Add the following style

body {
margin : 0;
}

body{
  background-image:url(bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0;
}

header{
  background-color:#000;
  padding: top;
  min-height: 70px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PaginaWeb</title>
    <script src="External_Java.js"></script>
    <link rel="stylesheet" type="text/css" href="Style.css">
     
</head>

<body>

   <header>
       <nav>
           <p>text</p>
        </nav>
    </header>
    
</body>

</html>

score 0 · Answer 3 · answered Jun 02 '18 at 17:28

0

header{
  background-color:#000;
  padding: top;
  min-height: 70px;
  margin-top:0px;


}

try this.

answered Jun 02 '18 at 17:28

SD_Kuma

31
5

Nope, I still have the space – Jun 02 '18 at 17:29
then reduce more give minus value – SD_Kuma Jun 02 '18 at 17:31

HTML - CSS(Header)

3 Answers3