Почему свойство margin-top так себя ведёт?

Question

Почему строчка margin-top: 100px сдвигает родительский элемент элемента с классом container на 100 пикселей вниз , а не тот элемент, где эта строчка прописана?

Вот код:

body {

margin: 0px;
padding: 0px;


}

.header {

width: 1000px;
height: 200px;
box-sizing: border-box;
background-color: black;

}


.container{

width: 100px;
height: 50px;
box-sizing: border-box;
background-color: rgb(226, 0, 0);
margin-top: 100px;


}

<!DOCTYPE html>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="btest.css" />
     <title></title>
   </head>
   
   <body>
      <header class="header">
        <div class = "container"></div>
      </header>
   </body>
</html>

Answer 1

margin так ведёт себя из за поведения схлопывания внешних отступов

Дословно из MDN:

Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны). Это поведение известно как схлопывание внешних отступов (margin collapsing)

Можно избавиться от этого поведения, если задать display: flow-root для того блока, у которого вы хотите, чтобы margin не схлопывался.
Свойство display: flow-root генерирует блок-бокс, который устанавливает новый контекст форматирования блока.

Примечание: новый контекст форматирования можно создать не только с помощью свойства display: flow-root, но и с помощью display: flex, display: grid, то есть с помощью любых CSS значений display, которые создают свой контекст форматирования блока. Но в отличие от flex/grid значений, display: flow-root не изменяет поведение элементов внутри контейнера.

без display: flow-root

body {
  margin: 0px;
  padding: 0px;
}

.header {
  width: 100%;
  height: 50vh;
  box-sizing: border-box;
  background-color: black;
}

.container {
  width: 20vw;
  height: 20vh;
  box-sizing: border-box;
  background-color: rgb(226, 0, 0);
  margin-top: 30vh;
}

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

с display: flow-root

body {
  margin: 0px;
  padding: 0px;
}

.header {
  width: 100%;
  height: 50vh;
  box-sizing: border-box;
  background-color: black;
  display: flow-root;
}

.container {
  width: 20vw;
  height: 20vh;
  box-sizing: border-box;
  background-color: rgb(226, 0, 0);
  margin-top: 30vh;
}

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

БЛОГ НА HUSL

Почему свойство margin-top так себя ведёт?

Ответы (1 шт):