div element takes extra vertical space-CodePudding

I am trying to implement a contact us page. the heading here takes only the intended space but the div takes up extra vertical space. Where did I go wrong?

section {
  display: flex;
  flex-wrap: wrap;
  width: 99vw;
  height: 96vh;
  padding-top: 4vh;
}

#heading {
  width: 100%;
  line-height: 0.7em;
}

h1 {
  display: inline;
  height: 100%;
  font-size: 1rem;
}

<section>
  <div id="heading">
    <h1>Contact Us</h1>
  </div>
  <div id="media_container">
    <img  src="fb.png" alt="fb">
    <img  src="instagram.png" alt="insta">
    <img  src="linkedin.png" alt="LinkedIn">
    <img  src="email.png" alt="email">
  </div>
</section>

CodePudding user response：

Just remove the height from the section

section{
      display: flex;
      flex-wrap: wrap;
      width: 99vw;
      padding-top: 4vh;
    }
    
    #heading{
      width: 100%;
      line-height: 0.7em;
    }
    
    h1{
      display: inline;
      height: 100%;
      font-size: 1rem;
    }

<section>
      <div id = "heading">
        <h1>Contact Us</h1>
      </div>
      <div id = "media_container">
        <img  src="fb.png" alt="fb">
        <img  src="instagram.png" alt="insta">
        <img  src="linkedin.png" alt="LinkedIn">
        <img  src="email.png" alt="email">
      </div>  
    </section>

CodePudding user response：

Just add margin: 0; to html, body to avoid the default margins on these elements which are the cause for your problem:

html,
body {
  margin: 0;
}

section {
  display: flex;
  flex-wrap: wrap;
  width: 99vw;
  height: 96vh;
  padding-top: 4vh;
}

#heading {
  width: 100%;
  line-height: 0.7em;
}

h1 {
  display: inline;
  height: 100%;
  font-size: 1rem;
}

<section>
  <div id="heading">
    <h1>Contact Us</h1>
  </div>
  <div id="media_container">
    <img  src="fb.png" alt="fb">
    <img  src="instagram.png" alt="insta">
    <img  src="linkedin.png" alt="LinkedIn">
    <img  src="email.png" alt="email">
  </div>
</section>