CODEWITHSUNDEEP
htmlcss
Ricky
Ricky

Reputation: 791

CSS - What is causing the Whitespace

When I insert an image into the <aside> element, it now "pushes" the <section> element roughly 50% down on the screen, this leaves 50% of whitespace on the screen, I have absolutely no idea what is causing it, the Dev console doesn't pick any errors up, Yet on all my browsers: Firefox, Chrome, Edge, all display it with this whitespace.

Here is a screenshot of the issue:

Whitespace.

And here is a snippet:

* {
    margin: 0;
    padding: 0;
}
header, section, footer, aside, nav, article, hgroup {
    display: inline-block;
}
html {  
    height: 100vh;
}
body { 
    font-family: 'Archivo Narrow', sans-serif;
    margin: 0 auto;    
    width: 100%;
    height: 100vh;
}
html, body {
    overflow: hidden;
}

/* Main Content Page */

main {
    width: 100%;
    height: 100vh;     
}
header {
    width: 100%;
    height: 18vh;
    background-color: orange;
}
aside {
    width: 20%;
    height: 82vh;
    background-color: orange; 
}
.hello {
    width: 70%;
    height: 40vh;
}
section {
    width: 80%;
    height: 82vh;
    background-color: darkgrey; 
    box-shadow: 5px 5px 5px inset; 
}
<body>

   <main id="content">

      <header>
        <h1>Just a random Header</h1>
      </header>

      <aside>
        <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
        <img src="Images/Businessman/Hello.png" alt="Welcome" class="hello" />
      </aside><!--
        This comment is to help remove the whitespace between these elements :/
      --><section>
        <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
        <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
        <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
        <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
      </section><!--
        This comment is to help remove the whitespace between these elements :/
   --></main>

  <script src="script.js"></script>
</body>
</html>

Upvotes: 0

Views: 87

Answers (1)

Cladiuss
Cladiuss

Reputation: 535

Add a vertical-align: top;to your section tag.

Explaination : The display property of your blocks is set to inline-block, so they will use the vertical-align property, which is by default to baseline. In your case you want them to align at the top, so you have to specify it.

* {
    margin: 0;
    padding: 0;
}
header, section, footer, aside, nav, article, hgroup {
    display: inline-block;
}
html {  
    height: 100vh;
}
body { 
    font-family: 'Archivo Narrow', sans-serif;
    margin: 0 auto;    
    width: 100%;
    height: 100vh;
}
html, body {
    overflow: hidden;
}

/* Main Content Page */

main {
    width: 100%;
    height: 100vh;     
}
header {
    width: 100%;
    height: 18vh;
    background-color: orange;
}
aside {
    width: 20%;
    height: 82vh;
    background-color: orange; 
}
.hello {
    width: 70%;
    height: 40vh;
}
section {
    width: 80%;
    height: 82vh;
    background-color: darkgrey; 
    box-shadow: 5px 5px 5px inset; 
    vertical-align: top;
}
<body>

	<main id="content">

		<header>
			<h1>Just a random Header</h1>
		</header>

		<aside>
			<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
			<img src="Images/Businessman/Hello.png" alt="Welcome" class="hello" />
		</aside><!--
			This comment is to help remove the whitespace between these elements :/
		--><section>
			<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
			<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
			<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
			<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
		</section><!--
			This comment is to help remove the whitespace between these elements :/
	--></main>

	<script src="script.js"></script>
</body>

Upvotes: 1

Related Questions