How to remove spacing between main tag and header? (solved)

Asked

Viewed 51 times

-2

When I place an element H2 within the tag Section who is the daughter of main, a spacing appears blank between the main and the header. The problem also occurs if the H2 tag is placed inside the main tag.

html,
body,
main {
  margin: 0;
  padding: 0;
  font-size: 16px;
}


/* INICIO CABEÇALHO */

header {
  width: 100%;
  height: 3.5em;
}

#navbar {
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;
}

#navbar-div {
  position: absolute;
  width: 100%;
}

#navbar-spam {
  position: fixed;
  background-color: pink;
  width: 25em;
  height: 3.5em;
}

#navbar-logo {
  position: absolute;
  background-color: teal;
  margin-right: 40rem;
  margin-top: 0;
  width: 50%;
  height: 100%;
  text-align: center;
}

#menu {
  position: fixed;
  background-color: springgreen;
  margin-left: 25em;
  width: 100%;
  height: 3.5em;
}


/* INICIO CORPO DO SITE */

main {
  height: 300rem;
  background-color: brown;
  color: black;
}

#secao1,
#secao2,
#secao3,
#secao4,
#secao5 {
  height: 20%;
}


/* INICIO RODAPÉ */

footer {
  background-color: blue;
  color: #ffff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <header>
    <nav id="navbar">
      <div id="navbar-div">
        <span id="navbar-spam">
                    <h1 id="navbar-logo">
                        logo
                    </h1>
                </span>
        <div id="menu">
          menu
        </div>
      </div>
    </nav>
  </header>
  <main>
    <section id="secao1">
      <h2>Seção 1</h2>
    </section>
    <section id="secao2">
      Seção 2
    </section>
    <section id="secao3">
      Seção 3
    </section>
    <section id="secao4">
      Seção 4
    </section>
    <section id="secao5">
      Seção 5
    </section>
  </main>
  <footer>
    rodapé
  </footer>
</body>

</html>

html css html5 css3

2 answers

0


I solved the problem by adding H2 next to main, body and html in the style.css. For H2 to work properly, I removed the font-size.

-1

Change main,body,html by *

From the same, because * selects all the elements, it would be the same as defining the whole body, the whole html, the main whole, and all the items, instead of 1 by 1, with *, vc selects all at once.

  • Thanks for the <3 tip

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.