0
イメージを<aside>要素に挿入すると、<section>要素が画面上に約50％下に「プッシュ」され、これが画面上の空白の50％を残します。それが原因で何が起こっているのか、デベロッパーコンソールはエラーを表示しませんが、Firefox、Chrome、Edgeのすべてのブラウザでこの空白が表示されます。ここでCSS - ホワイトスペースの原因
は、問題のスクリーンショットです：
。ここ
とスニペットです：
* {
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>
私は、これは空白の問題よりも、位置決め問題のより多くのだと思います。あなたが必要とする 'align'プロパティがあると思います。 – Carcigenicate