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

Question

我有一个容器div(它的宽度和高度都设置为像素).

有没有办法添加一个子div,它将填充其整个父级但仍有边距和/或填充？

假设父div为200px宽,200px高.

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

我希望孩子div的内容区域是在每边取出5px边距后剩下的东西......

并且请不要告诉我从200像素减去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/