Ask Question Sign In Sign Up

How to remove space between header and body in HTML?

Member

by jessyca_langosh , in category: HTML/CSS , 2 years ago

How to remove space between header and body in HTML?


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="image/1.png" type="image/png" />
    <style>
      header {
        width: 100%;
        height: 10em;
        background-color: #345cd7;
        position: relative;
        margin: 0;
        padding: 0;
      }


      .top-box {
        background-color: #345cd7;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="images/2.png" id="logo" />
    </header>
    <div class="top-box">
      <h1>Welcome</h1>
    </div>
  </body>
</html>


Facebook Twitter LinkedIn Telegram Whatsapp
space body html remove

2 answers

Member

by Ekaterina_90 , 2 years ago

@jessyca_langosh  Just set margin: 0 in your h1 tag.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="image/1.png" type="image/png" />
    <style>
      header {
        width: 100%;
        height: 10em;
        background-color: #345cd7;
        position: relative;
        margin: 0;
        padding: 0;
      }
      .top-box {
        background-color: #345cd7;
        margin: 0;
        padding: 0;
      }
      .top-box h1{
        margin: 0;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="images/2.png" id="logo" />
    </header>
    <div class="top-box">
      <h1>Welcome</h1>
    </div>
  </body>
</html>

Member

by gina , 10 months ago

@jessyca_langosh 

One way to remove the space between the header and body in HTML is to use CSS to set the margin and padding of the body to zero.


Here is an example code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html>

<head>
  <title>Remove space between header and body</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <header>
    <!-- Header content -->
  </header>

  <main>
    <!-- Main content -->
  </main>

  <footer>
    <!-- Footer content -->
  </footer>

</body>

</html>


In this code, we set the margin and padding of the body element to zero so that there will be no extra space around it. You can adjust the values to your preferred spacing.

Related Threads:

How to remove 'x-robots-tag' http header in Symfony 5?
How to remove the iframe body padding?
How to remove space before string in Python?
How to remove space after a figure in LaTeX?
How to remove space before text in Python?