html - 具有内部边距的 3div

Question

我想要三个具有内部边距（无填充）的 div，如下所示：

+---------------------+
|         15px        |
| +-----------------+ |
| |       20px      | |
| | +-------------+ | |
| | |             | | |
| | |             | | |
| | |             | | |
| | |             | | |
| | +-------------+ | |
| +-----------------+ |
+---------------------+

我对三个 div 使用了以下样式：

#outer{
 width: 800px;
 height: 800px;
 position: absolute;
}
#middle{
  width: 750px;
  height: 750px;
  position: relative;
  margin-top: 15px;
}
#inner{
  width: 700px;
  height: 700px;
  margin-top: 20px;
}

通过上述样式，不包括内部 div，margin 效果很好并且位置正确。但是如果我放置内部 div，那么 margin-top 就变成了最内部 div 的边距，如下所示：

+---------------------+
|         20px        |
| +-----------------+ |
| | +-------------+ | |
| | |             | |
| | |             | | |
| | |             | | |
| | |             | | |
| | |             | | |
| | +-------------+ | |
| +-----------------+ |
+---------------------+

即，中间 div 的 margin-top 也从 15px 增加到 20px（这实际上是内部 div 的 margin-top），即使我给出 position: relative to inner div。我可以通过对中间 div 应用填充来实现所需的边距（填充顶部：20px）。但我想在没有填充的情况下完成这些边距。因此，如果我想为 3、4 甚至更多的 div 做这种类型的边距，该怎么做？任何帮助将不胜感激？

Answer 1

请查看这个小提琴http://jsfiddle.net/JzUCm/，这是你所追求的吗？

我已将 css 更新为：

#outer{
 width: 800px;
 height: 800px;
 position: absolute;
    background:yellow;
}
#middle{
  width: 750px;
  height: 750px;
  position: relative;
  margin: 15px 25px 0px 25px;
    background:red;
}
#inner{
  width: 700px;
  height: 700px;
  top: 20px;
  left:25px;
  position:absolute;
  background:green;
}

本质上，我使第三个 div 相对于父级（中间 div）绝对定位。也忽略背景颜色，只添加它们，这样你就可以看到发生了什么。