html - 为什么内部DIV会溢出外部DIV？

Question

我已经远离 HTML 和 CSS，找不到这个简单问题的解决方案。

我有一个 div 放在另一个里面。外黑内橙。

我的 HTML 和 CSS 是:

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

为什么我的内部 DIV 会溢出外部？如何在不提供固定尺寸的情况下修复它？

Answer 1

因为边距 - 宽度是 100% 加上边距。为避免这种情况，请编写 width: calc(100% - 10px);(= 两倍的边距。)高度相同。

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {

  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  background-color: orange;
}

<div id="outer">
  <div id="inner">
  </div>
</div>