CODEWITHSUNDEEP
htmlcssflexbox
Jamie
Jamie

Reputation: 10886

Unknown gap between elements in flexbox

There is a mystery space between the top red and blue bars.

What am I doing wrong? When I remove main the bar goes away. But the footer comes to the top?

I've made a fiddle: https://jsfiddle.net/v9yrmafw/1/#

.strip {
  height: 20px;
  background: red;
}
.bar {
  text-align: center;
  background: blue;
  color: white;
  height: 100px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>

  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Upvotes: 4

Views: 1813

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371251

The source of the problem is margin collapsing, as pointed out in @Kukkuz' answer.

In addition to the two solutions mentioned in that answer – changing the margin or adding border / padding – both of which disable margin collapsing, there's a third: make the parent a flex container

Add this to your code:

.bar {
    display: flex;
}

In a flex formatting context, margins do not collapse.

From the spec:

3. Flex Containers: the flex and inline-flex display values

A flex container establishes a new flex formatting context for its contents.

This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.

For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

revised fiddle

.bar {
    text-align: center;
    background: blue;
    color: white;
    height: 100px;
    display: flex; /* NEW */
    justify-content: center; /* NEW */
}
.strip {
    height: 20px;
    background: red;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}  
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>
  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Upvotes: 3

Shivkumar kondi
Shivkumar kondi

Reputation: 6762

try this for h1

.strip {
    height: 20px;
    background: red;
    
  }
  
.bar {
    text-align: center;
    background: blue;
    color: white;
    height: 100px;
   
  }
  
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  
}  

.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  
  
}
<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar"><h1 style=" padding:0px;
    margin:0px;">Home</h1></div>
  </main>
  
  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

This occurs due to margin collapsing of h1 to the bar div - so you can either:

  1. Reset margin to zero for the h1

  2. Add a padding / border to bar

See demo below - I've added some padding to bar:

.strip {
  height: 20px;
  background: red;
}
.bar {
  text-align: center;
  background: blue;
  color: white;
  height: 100px;
  padding: 10px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>

  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Upvotes: 3

Related Questions