Two Part Question - What's causing this white space?

Question

TWO QUESTIONS. What's causing this whitespace? AND why can't I find it in the inspector with F12?

I've tried searching for similar questions but they don't seem to pertain to my specific issue. Please let me know if you're able to identify what's going on here.

Fiddle: https://jsfiddle.net/sc7Lh9j6/

/*--------------------------------------------------------------
    # Debug
    --------------------------------------------------------------*/


/*--------------------------------------------------------------
    # General
    --------------------------------------------------------------*/

body {
  margin: 0px;
  padding: 0px;
  font-family: Share, arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 2em;
  padding: 0.67em 0;
}

span.clear {
  clear: left;
  display: block;
}


/* Target div ONLY if direct child of body 
            This is for the main sections which alternate dark and light */

body>div {
  display: block;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.inner {
  padding: 10px;
}


/* Colors for main sections */

.dark {
  color: rgb(169, 169, 169);
  background-color: rgb(51, 51, 51);
}

.light {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}


/*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/

.header {
  display: inline-block;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.091em;
}

.headerlink {
  /* necessary for two-div arrangement */
  float: left;
}

.headernavs {
  float: right;
  padding: 0px 0px 0px 10px;
}


/* necessary for two-div arrangement 
        .headernavs{
            
            float:none;
            overflow: hidden;
    
            display: flex;
            flex-grow: 1;
            justify-content: space-around;
        }
        */

.header a:link,
a:visited {
  text-decoration: none;
  color: #FFF;
}

.header a:hover,
a:active {
  text-decoration: none;
  color: #AAA;
}

.header img {
  display: inline-block;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}


/*--------------------------------------------------------------
    # Hero
    --------------------------------------------------------------*/

#hero.hero {
  background-image: url('../../assets/img/hero.png');
  background-size: cover;
  background-position: right;
  min-height: 75vh;
}

#hero .hero-container {
  background-color: rgba(0, 0, 0, 0.8);
  min-height: 75vh;
  vertical-align: middle;
}

#hero img {
  margin-top: 10vh;
}


/*--------------------------------------------------------------
    # Prof Tech Assist
    --------------------------------------------------------------*/

#proftech a {
  border: 1px solid rgb(255, 255, 255);
  padding: 8px 16px;
  margin: 15px 0px;
  display: inline-block;
}

#proftech a:link,
a:visited {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

#proftech a:hover,
a:active {
  text-decoration: none;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}


/*--------------------------------------------------------------
    # About Us
    --------------------------------------------------------------*/

#aboutus img {
  display: block;
  margin: auto;
}

#aboutus .aboutuscontent {
  display: flex;
  align-items: center;
  justify-content: center;
}

#aboutus .aboutuscol {
  width: 30%;
}


/*--------------------------------------------------------------
    # Portfolio
    --------------------------------------------------------------*/

#portfolio .your-class {
  display: inline-block;
  width: 75%;
}

#portfolio .portfolio-container {
  /*
            text-align: center;
            width: 100%;
    
            padding: 0px;
            margin: 0px;
            */
}

#portfolio .portfolio-img {
  display: inline-block;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}


/*--------------------------------------------------------------
    # Contact
    --------------------------------------------------------------*/

#contact div,
input,
textarea {
  display: block;
}

#contact .contactfields {
  max-width: 600px;
  margin: auto;
}

#contact .contactitem {
  width: 100%;
  margin: 0 0 5px 0;
  /* These make the inputs the same width: */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<!------------------------ HEADER ----------------------------------->

<!-- Credit to SO for the two-div solution.
        https://stackoverflow.com/questions/1260122/expand-a-div-to-fill-the-remaining-width
    -->

<div id="header" class="dark header">
  <div class="inner">

    <div class="headerlink"></div>

    <div class="headernavs">
      <a href="#header">HOME</a>
      <a href="#portfolio">PORTFOLIO</a>
      <a href="#contact">CONTACT</a>
    </div>

    <span class="clear"></span>

  </div>
</div>

<!------------------------ HERO SECTION ----------------------------------->
<div id="hero" class="light">
  <div class="hero-container">
    What causes this space? ^
  </div>
</div>

If you remove the `float: 'right'` on `.headernavs`, then the space goes away. Maybe you need `text-align: 'right'` instead? Can't answer the "why" of it though, not a designer — Tim Lewis, Mar 27 '23 at 17:10
What's the whitespace you're addressing here? Is it the white space before the "Home" text or something else — Abdelrahman, Mar 27 '23 at 17:10
@Abdelrahman Visually, directly above the words "What's causes this...". It separates the two gray sections — TheLeb, Mar 27 '23 at 17:13
No problem! Again, not sure of the why of things; I'm not super proficient with CSS, but `float` behaves strangely sometimes. But if you're just trying to align those `` elements, `text-align` or `flex` should work too (and/or use the answer below; they seem to know what they're talking about ) Cheers! — Tim Lewis, Mar 27 '23 at 17:22

score 3 · Accepted Answer · answered Mar 27 '23 at 17:17

Your .header element is an inline-block – this causes the white space below it: By default inline-blocks are vertically aligned to the baseline, and some space remains below the baseline (for descenders of characters like y, g, p), which you see as white space here.

To avoid that, add vertical-align: top (or apply display: block) to .header

/*--------------------------------------------------------------
    # Debug
    --------------------------------------------------------------*/


/*--------------------------------------------------------------
    # General
    --------------------------------------------------------------*/

body {
  margin: 0px;
  padding: 0px;
  font-family: Share, arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 2em;
  padding: 0.67em 0;
}

span.clear {
  clear: left;
  display: block;
}


/* Target div ONLY if direct child of body 
            This is for the main sections which alternate dark and light */

body>div {
  display: block;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.inner {
  padding: 10px;
}


/* Colors for main sections */

.dark {
  color: rgb(169, 169, 169);
  background-color: rgb(51, 51, 51);
}

.light {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}


/*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/

.header {
  display: inline-block;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.091em;
  vertical-align: top;
}

.headerlink {
  /* necessary for two-div arrangement */
  float: left;
}

.headernavs {
  float: right;
  padding: 0px 0px 0px 10px;
}


/* necessary for two-div arrangement 
        .headernavs{
            
            float:none;
            overflow: hidden;
    
            display: flex;
            flex-grow: 1;
            justify-content: space-around;
        }
        */

.header a:link,
a:visited {
  text-decoration: none;
  color: #FFF;
}

.header a:hover,
a:active {
  text-decoration: none;
  color: #AAA;
}

.header img {
  display: inline-block;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}


/*--------------------------------------------------------------
    # Hero
    --------------------------------------------------------------*/

#hero.hero {
  background-image: url('../../assets/img/hero.png');
  background-size: cover;
  background-position: right;
  min-height: 75vh;
}

#hero .hero-container {
  background-color: rgba(0, 0, 0, 0.8);
  min-height: 75vh;
  vertical-align: middle;
}

#hero img {
  margin-top: 10vh;
}


/*--------------------------------------------------------------
    # Prof Tech Assist
    --------------------------------------------------------------*/

#proftech a {
  border: 1px solid rgb(255, 255, 255);
  padding: 8px 16px;
  margin: 15px 0px;
  display: inline-block;
}

#proftech a:link,
a:visited {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

#proftech a:hover,
a:active {
  text-decoration: none;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}


/*--------------------------------------------------------------
    # About Us
    --------------------------------------------------------------*/

#aboutus img {
  display: block;
  margin: auto;
}

#aboutus .aboutuscontent {
  display: flex;
  align-items: center;
  justify-content: center;
}

#aboutus .aboutuscol {
  width: 30%;
}


/*--------------------------------------------------------------
    # Portfolio
    --------------------------------------------------------------*/

#portfolio .your-class {
  display: inline-block;
  width: 75%;
}

#portfolio .portfolio-container {
  /*
            text-align: center;
            width: 100%;
    
            padding: 0px;
            margin: 0px;
            */
}

#portfolio .portfolio-img {
  display: inline-block;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}


/*--------------------------------------------------------------
    # Contact
    --------------------------------------------------------------*/

#contact div,
input,
textarea {
  display: block;
}

#contact .contactfields {
  max-width: 600px;
  margin: auto;
}

#contact .contactitem {
  width: 100%;
  margin: 0 0 5px 0;
  /* These make the inputs the same width: */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<!------------------------ HEADER ----------------------------------->

<!-- Credit to SO for the two-div solution.
        https://stackoverflow.com/questions/1260122/expand-a-div-to-fill-the-remaining-width
    -->

<div id="header" class="dark header">
  <div class="inner">

    <div class="headerlink"></div>

    <div class="headernavs">
      <a href="#header">HOME</a>
      <a href="#portfolio">PORTFOLIO</a>
      <a href="#contact">CONTACT</a>
    </div>

    <span class="clear"></span>

  </div>
</div>

<!------------------------ HERO SECTION ----------------------------------->
<div id="hero" class="light">
  <div class="hero-container">
    What causes this space? ^
  </div>
</div>

Two Part Question - What's causing this white space?

1 Answers1