具有需要填充其父级的边距和填充的 div

Question

我有一个容器 div（它的宽度和高度都以像素为单位）。

有没有办法添加一个子 div 来填充它的整个父 div 但仍然有边距和/或填充？

假设父 div 宽 200px，高 200px。

如果我给孩子 div 的宽度/高度为 100%，那么它假设我的意思是内容的大小为 200px，然后如果我添加填充或边距，孩子的大小会变得比父母的大。

我希望子 div 的内容区域是每边去掉 5px 边距后剩下的内容……

请不要告诉我从 200px 中减去 2*5px - 我知道，但我正在寻找更好的解决方案。

难道 css 无法处理这么简单的任务……

原文由 epeleg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试以下操作：

 #outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

.inner {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

演示：http: //jsfiddle.net/wYNYh/1/

原文由 Yoshi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将所有元素设置为在样式表中将 box-sizing 设置为 border-box。

这将总结所有元素的填充，因此您不必担心添加任何填充时会出现任何中断。

 *{
   box-sizing: border-box;
}

原文由 dusty 发布，翻译遵循 CC BY-SA 4.0 许可协议