Why are the two break lines <br> different?

There is a very subtle difference between the break lines above the input type form box and the text area. I like how there is hardly any space between the text of the line break “Message” and the text area below it. Why is it not the same for the input form type box? There is a gap/space between the text “Email Address” and the input type form box. How to fix that?
code:

On your input you have a margin of margin: 8px 0; on line 53 of your css which gives an 8 pixel margin both above and below the input. If you only wanted the margin below you could change it to either margin-bottom: 8px or margin: 0 0 8px 0;

1 Like

hi, you can add other break to get the gaps Ex:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
  <main class="overall-background">
    <nav id="navbar">
      <ul>
      <li><a href= "#about-me">About Me </a></li>
      <li> <a href= "#projects"> Projects </a> </l1>
      <li><a href="#contact">Contact </a></li>
      <li> <a href="#social"> Social</a></li>
      </ul>
    </nav>
 <section class="background" id="welcome-section">
 <h1 class="entry-text"> Personal Portfolio Webpage </h1>
    </section>
  <section>
  <h2>About Me: </h2>
    <section class="flex-container">
   <div>
  <img class= "black-border" src="https://pbs.twimg.com/profile_images/894664349444325376/gx1cNyBc_400x400.jpg" alt="Personal photo above">
  </div>
  <div>
  <p class="about-me-text" id="about-me"> I am currently a student at the University pursuing a degree in Computer Science. I am strongly interested in learning more about the interactions of technology with society, especially with Artificial Intelligence. I’m very excited to build off of my past experiences and learn more about solving emerging problems around the world. </p> </div>
  </section>
  </section>
     <section id="projects"> 
       <h2 class="project-tile">Projects:</h2>
       <h3>Some Projects that I have worked on recently are below</h3>
       <a href="https://github.com/faarissattar/PerfectPlaylist"> Perfect Playlist</a>
    <p> PerfectPlaylist is an Android application which allows users to vocalize anything from how they feel, to a specific artist, and create a playlist based on those elements through natural language processing. I worked on the backend part of the team and focused on using Android Studio, Java, Spotify API, Houndify API, IBM Watson API, and Git. </p> </section>
<section>
       <h1 id="contact"> Contact: </h1>
       <form action"/submit-email-address">
        Email Address: <br><br>
  <input type="text" required placeholder="Please type in your email address here"> </input> 
       </form>
  Message: <br/><br/>
<textarea rows="5" cols="40" required placeholder="Please type in your message here"></textarea>
  <button type="Submit">Submit</button> 
</section>
<section> 
  <h1 id="social"> Social: </h1>
 <div class="icon-bar">
  <a href="https://twitter.com/utsavmalik1?lang=en" class="twitter"><i class="fa fa-twitter"></i></a> 
  <a href="http://www.linkedin.com/in/utsav-malik-98b225178" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="https://github.com/umalik1910" class="github"><i class="fa fa-github"></i></a> 
</div>
 </main>
</html>