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>>Solution :
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>