Container shifts when adding margin to child

Question

I've got two div elements with my classes container and innercontainer with the following CSS styles.

.container {
  width: 200px;
  height: 200px;
  background-color: green;
}
.innercontainer {
  height: 30px;
  background-color: red;
  margin: auto;
  margin-top: 80px;
}

<div class="container">
  <div class="innercontainer"></div>
</div>

What I expected was a red rectangle almost in the center of a green square.

What I got was a red rectangle on top of a green square. It shifted my rectangle 80px down but why does it put my square below the rectangle?

If I put a border around the square everything goes as expected. The same is if I say position: fixed in my container class.

I thought block elements orient themselves at the border of their surrounding container. In this case it seems to me as if innerconainer orients itself at the body?

Where is the width of the innercontainer? no width usuall means as wide as possible unless something is inside of it. — Ryan, Feb 15 '16 at 18:51

score 1 · Answer 1 · edited May 23 '17 at 12:15

This is due to margin collapse:

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

There are multiple ways to prevent this, e.g. by using inline-block instead of block.

.container {
  width: 200px;
  height: 200px;
  background-color: green;
}
.innercontainer {
  display: inline-block;
  width: 100%;
  height: 30px;
  background-color: red;
  margin: auto;
  margin-top: 80px;
}

<div class="container">
  <div class="innercontainer"></div>
</div>

Asons · Answer 2 · 2016-02-15T19:07:01.353

Due to collapsing margins your div gets pushed down.

Set overflow:auto on the container

.container {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: auto;
}

.innercontainer {
  height: 30px;
  background-color: red;
  margin-top: 80px;
}

  <div class="container">
    <div class="innercontainer">
    </div>
  </div>

or use padding-top on the container

.container {
  width: 200px;
  height: 200px;
  background-color: green;
  padding-top: 80px;
  box-sizing: border-box;
}

.innercontainer {
  height: 30px;
  background-color: red;
}

<div class="container">
  <div class="innercontainer">
  </div>
</div>

Sumit Sahay · Answer 3 · 2016-02-15T19:18:23.850

You need to provide padding to the parent container to shift it to the center. proving margin from the innercontainer will start taking margin from top and if it exceeds the height, it will overflow the parent container.

So, what you are trying to do would somewhat work like this:

  .container {
    padding:35px;   
    width: 200px;
    height: 200px;
    background-color: green;     
  }

 .innercontainer {
   height: 30px;
   background-color: red;
   margin: 80px 0 0 0;
 }

<div class="container">
  <div class="innercontainer"></div>
</div>

Container shifts when adding margin to child

3 Answers3