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

HTML-CSS
1

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>
2

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
3

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
4

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

5

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
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.