セクション要素に何も表示されていない、または周囲に空白があります

Question

内容が全く表示されないか、または<section>要素の周囲に空白が残ります。

これは、デフォルトで設定されているdisplay: inline-blockスタイルと関係がある。だから私はすべての子要素にdisplay: block;を設定することでそれを無効にしようとしました。これは<section>をサイトに表示しませんでした。

私はこれをどのように一緒に落とすのですか？空白を削除します。ここで

がスニペットです：不思議な

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

 
/* Main Content Page */ 
 

 
main { 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 18vh; 
 
    background-color: orange; 
 
} 
 
aside { 
 
    width: 20%; 
 
    height: 82vh; 
 
    background-color: orange; 
 
} 
 
section { 
 
    width: 79%; 
 
    height: 82vh; 
 
    background-color: darkgrey; 
 
    box-shadow: 5px 5px 5px inset; 
 
}

<main id="content"> 
 

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

 
<aside> 
 
\t <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> 
 
</aside> 
 

 
<section> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 

 
</main>

、スニペットやCodepenもないので、ここで、この問題を示し、両方のFirefoxとChrome上で、問題を表示するスクリーンショットです。

Answer 1

にwidth:80%を残します0と、彼らはinline-block秒であるため、あなたは一例

1. </aside><section>ため
   それらの間のホワイトスペースを削除するために、いくつかの「トリック」を使用する必要があります。 asidesが終了すると、すぐにがブレークインまたはスペースなしで開始されます。
2. </aside><!-- --><section>コメントを使用してください。
3. あなたの代わりに、なぜあなたは `幅ありませんdisplay:inline-block