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

Question

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

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

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

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

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

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

难道css不能处理这么简单的任务...

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/