子级“ div”删除父级“ div”的“ border”时，子级“ div”失去边距

Question

你好，我在建一个计算器，以便可以练习Java的早期技能，但遇到一个奇怪的问题，我似乎无法理解。

通常，当我为div设置样式时，会给它们加上边框，以便我可以更好地看到它们，完成样式后，如果我在设计中不需要它们，则将其删除。 ，直到现在，直到今天，绝对没有问题。

这是问题

如果我从 border: 1px solid black; div中删除了.calculator，则.output div会松开其margin-top: 5,5%;并粘在其父div的顶部边缘，因此{{1 }}。

在此处带有边框

这里没有边界

.calculator

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}

.calculator {
  border: 1px solid black;
  width: 80vw;
  height: 80vh;
  margin: auto;
  position: relative;
  top: 50vh;
  transform: translateY(-50%);
  border-radius: 10px;
  background: rgb(225,225,225);
  box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}

.output {
  border: 1px solid black;
  width: 90%;
  height: 20%;
  margin: auto;
  margin-top: 5.5%;
}

为什么？我做错了什么？