Question

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

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

我使用了以下三种格式的风格：

#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，保证金运作良好，位置合理。但是如果我放置内部div，那么margin-top就会变成这个内部div的边缘：

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

即，中间div的margin-top也从15px增加到20px（实际上是内部div的margin-top），即使我给位置：相对于内部div。我可以通过将padding应用到中间div（padding-top：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;
}

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

内部保证金的3divs

1 个答案: