Не двигается div с помощью margin-top

Question

Хочу сделать отступ для вложенного div'a 15px, но он не двигается, получается только если задать родителю padding-top, при этом вложенный div спокойно двигается в стороны с помощью того же margin, в чём проблема?

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

body{
    background-color: #3b3b3b;
}

.BackOfCalc{
    width: 385px;
    height: 625px;
    background-color: #1a1a1a;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.CalcWindow{
    width: 355px;
    height: 70px;
    background-color: #e4e4e4;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

<!DOCTYPE html>
<html>
<head>
    <title>Calculate it!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
    <div class="BackOfCalc">
        <div class="CalcWindow"></div>      
    </div>
</body>
</html>

Answer 1

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

body{
    background-color: #3b3b3b;
    display: flex;
    justify-content: center;
    align-items: center;
}

.BackOfCalc{
    width: 385px;
    height: 625px;
    background-color: #1a1a1a;
    margin-top: 120px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.CalcWindow{
    width: 355px;
    height: 70px;
    background-color: #e4e4e4;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

P.s. Лучше не использовать margin: auto для таких целей, а выучить флексбоксы или гриды

БЛОГ НА HUSL

Не двигается div с помощью margin-top

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