Элемент Section не отображает ничего и / или имеет пробелы вокруг него

Содержимое не отображается вообще или оставляет пробелы вокруг <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>
	<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> 
</aside>

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

</main>

Как ни странно, ни фрагмент или Codepen показать эту проблему, так что вот скриншот, чтобы показать проблемы, как на Firefox и Chrome:

Результат Выпуска

1 ответ

  1. оставьте width:80%sectionи, поскольку они inline-blocks , Вы должны использовать некоторые «трюки», чтобы удалить пробелы между ними

    например

    1. </aside><section> . когда asidesзаканчивается, <section>начинается сразу без структурных линий или пробелов в HTML
    2. </aside><!--
      --><section>
      использование комментариев.
    3. вы могли бы использовать float:leftвместо display:inline-block