0

My question is about this code : 

* {
  box-sizing: border-box;
}

body {
  background: rgb(0, 212, 255);
  background: linear-gradient(121deg, rgba(0, 212, 255, 1) 51%, rgba(204, 64, 180, 1) 51%);
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: red;
  width: 80%;
  height: 80%;
}

.inner-container {
  width: 15%;
  height: 100%;
  background-color: blueviolet;
}
<div class='container'>
  <div class='inner-container'>
    <h1>Some text </h1>
  </div>
</div>

Here is codepen. If i remove <h1>Some text</h1> from the inner container, everything is positioned the way i want it. As soon as i add h1 or other html tag that has default margin inner container moves down and overflows parent. I can not understand why this is happening in this case. As i understand, that default margin should be applied within the inner container and it should not cause this weird behavior.

j08691
  • 204,283
  • 31
  • 260
  • 272
Noob
  • 2,247
  • 4
  • 20
  • 31
  • 1
    Your `h1` has a `margin-top` that is pushing it (and its container) down. If you apply `margin-top: 0` to your `

    `, it should resolve the issue. It's due to [**collapsing margins**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).

     – Tyler Roper Jul 17 '19 at 17:12
  • I know how to fix it, i just can not understand why it is pushing inner container . That margin -top should be within inner container as i understand it – Noob Jul 17 '19 at 17:15
  • You can change the display of h1 to inline-block. It also solves it. – Azametzin Jul 17 '19 at 17:15
  • I've elected to answer and retracted my duplicate vote because the suggested dupe doesn't explain the cause (margin collapsing) in any sort of detail. The only answer that attempted to shed some light was deleted by a moderator for being a duplicate answer. As such, I'm providing one below. – Tyler Roper Jul 17 '19 at 17:22
  • @TylerRoper the accepted answer already use the keyword *collapse* and link to the official spec explaining this. I think it's enough to be considered as duplicate. – Temani Afif Jul 17 '19 at 20:10

1 Answers1

1

This is due to margin collapsing:

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

Your <h1> margin is being applied to inner-container because, as the quote above states, there is nothing separating the two.

You could create a "block formatting context" by changing the <h1> to be inline-block, or just simply remove its margin altogether.

* {
  box-sizing: border-box;
}

body {
  background: rgb(0, 212, 255);
  background: linear-gradient(121deg, rgba(0, 212, 255, 1) 51%, rgba(204, 64, 180, 1) 51%);
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: red;
  width: 80%;
  height: 80%;
}

.inner-container {
  width: 15%;
  height: 100%;
  background-color: blueviolet;
}

h1 { margin: 0; }
<div class='container'>
  <div class='inner-container'>
    <h1>Some text </h1>
  </div>
</div>
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56