Personal Portfolio Project - weird white space between welcome-section & fixed nav bar

Hey guys,
When i add margin-top to my h1 tag of welcome-section, there’s a white space came up on top of my welcome-section, why the white space came up on top of my welcome-section instead of h1.
Also if i gave border: 2px solid black; to welcome-section the problem gets resolved, and don’t now even this,
I don’t now what is happening here.

https://codepen.io/Danish0159/pen/PoGgzOw

  • {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }
    body {
    font-size: 1rem;

      }
    
      /* Navigation Styling */
    
      nav {
    
          position: fixed;
    
          top: 0;
    
          left: 0;
    
          background-color: #BE3144;
    
          width: 100%;
    
      }
    
      nav ul {
    
          display: flex;
    
          justify-content: flex-end;
    
          list-style: none;
    
          margin-right: 40px;
    
      }
    
      @media(max-width: 600px) {
    
          nav ul {
    
              justify-content: center;
    
              margin-right: 0px;
    
          }
    
      }
    
      nav ul li {
    
          color: white;
    
          font-size: 1.6rem;
    
          padding: 1.1em 1em;
    
      }
    
      /* Welcome section  */
    
      #welcome-section {
    
          background-color: #3a3d40;
    
          height: 100vh;
    
          margin-bottom: 200px;
    
          /* This border is Solving the problem otherWise the white space came up.  */
    
          /* border: 1px solid black; */
    
      }
    
      #welcome-section h1 {
    
          font-weight: 700;
    
          font-size: 4rem;
    
          text-align: center;
    
          color: white;
    
          margin-top: 200px;
    
      }
    
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- Navigation  -->

<nav>

    <ul>

        <li><a id="#">About</a></li>

        <li><a id="#">Work</a></li>

        <li><a id="#">Contact</a></li>

    </ul>

</nav>

<!-- Welcome Section  -->

<div id="welcome-section">

    <h1>Hey I am Danish</h1>

    <p>a web developer</p>

</div>

That’s because of a thing called “margin collapse”.

Here’s a very good article about it: https://www.joshwcomeau.com/css/rules-of-margin-collapse/

TLDR: Add display: flex or display: flow-root to #welcome-section

1 Like

Hi,

This is an old problem with css.
One of the reason I rarely use margin, because of this.
There is another link to understand about margin collapse:
Mastering margin collapsing - CSS: Cascading Style Sheets | MDN (mozilla.org)

The simple approach is to add border-top on the parent or like :point_up: solution.

1 Like

Sir you said you are not using margins rarely, basically so what u used in these kind of scenarios.

Hi,

I use Spacer, or just span on top of h1 with display block and give it a certain height :smiley:

What is spacer?, maybe this one is more related:
Bringing Spacer GIFs Back, to handle spacing elements in React and CSS (joshwcomeau.com)

Why I rarely use margin, because its behavior is kind of weird imo.
Margin considered harmful (mxstbr.com)

1 Like