为什么内部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>

Answer 2

上面的答案假设您不想要保证金。事实上，如果您想要边距，那么您可以添加overflow: hidden;到#outer。