Ricky Ricky - 1 month ago 18
CSS Question

Whitespace Issues

I have constantly been battling these white space issues all day now.

My issue now is this: When i insert an image into the

<aside>
element, it now "pushes" the element roughly 50% down on the screen, this leaves 50% of whitespace on my screen, I have absolutely no idea what is causing it, as the Dev console doesn't pick any errors up, Yet on all my browsers, Firefox, Chrome, Edge etc 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>




Answer

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>

Comments