Контейнерные смены при добавлении поля к дочернему

Question

У меня есть два элемента div с контейнерами классов и внутренним контейнером со следующими стилями CSS.

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

Что я ожидал, был красный прямоугольник почти в центре зеленой площади.

У меня был красный прямоугольник на зеленой площади. Он сдвинул мой прямоугольник на 80 пикселей вниз, но почему он поместил мой квадрат под прямоугольник?

Если я поместил границу вокруг площади, все будет как ожидается. То же самое, если я скажу position: fixed в своем классе контейнера.

Я думал, что элементы блока ориентируются на границе их окружающего контейнера. В этом случае мне кажется, что внутренний конинер ориентируется в теле?

Answer 1

Из-за collapsing margins ваш дип сдвинут вниз.

Набор overflow:auto на 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>

или использовать padding-top на 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>

Answer 2

Это связанно с margin collapse:

Верхний край блока элемента в потоке падает с верхним краем своего первым в потоке блочного уровня ребенка, если элемент не имеет верхнюю границы, нет верхней обивки , и у ребенка нет разрешения.

Есть multiple ways, чтобы предотвратить это, например. используя встроенный блок вместо блока.

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

Answer 3

Вы должны предоставить padding для родительского контейнера, чтобы переместить его в центр. подтверждение margin от innercontainer начнет принимать margin сверху и если оно превышает высоту, оно переполнит родительский контейнер.

Итак, что вы пытаетесь сделать бы несколько работать так:

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