Ricky Ricky - 1 year ago 42
CSS Question

Section Element not displaying anything and/or has whitespace surrounding it

This question is a follow up on another previous question I asked, Found here:
Original Question. Now this has led to either the content not displaying at all, or leaves whitespace around the

<section>
element.

From the answer to the first question, I had to adjust the width of the
<section>
element to 79% which left whitespace around the edges, Noticeably.

This i presume is from using
Display: Flex;
I originally got around this whitespace issue by setting font-size to 0, However that led to my first question, I removed that and I only seem to get the whitespace around the
<section>
element.

Ultimately, This is to do with the
display: inline-block
style that is set by default. So I tried overriding that by setting
display: block;
on all child elements, This led to
<section>
not displaying at all on the site.

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





Strangely enough, neither the Snippet or Codepen show this issue, so here is a screenshot to show the issues, both on Firefox and Chrome:

Issue Result

Answer Source

leave width:80% on section and, because they are inline-blocks , you should use some 'tricks' to remove the white-spaces between them

for example

  1. </aside><section> . when asides ends, <section> starts immediately without breaklines or spaces in HTML
  2. </aside><!-- --><section> using comments.
  3. you could use float:left instead of display:inline-block