css - 制作元素之间有边距但不是容器的元素容器？

Question

• 容器 #666 有 margin: 20px;溢出:隐藏；。
• 节点 #333 有 margin: 20px 0 0 20px; float :左；。

例子，http://jsbin.com/owejal/3/edit或图片:

然而，预期的结果是:

• 具有 20 像素边距的容器，
• 子元素之间有 20 像素的边距，但不包含容器。

这可以使用负填充来实现(即如果容器有 padding: -20px 0 0 -20px)，尽管这样的东西不存在。

使用附加元素 ( http://jsbin.com/owejal/4/ ) 可以实现期望的结果，但我很想知道是否有仅 CSS 的解决方案。

Answer 1

如果只关心元素之间的间距，可以舍弃伪元素。它仅用于背景。

http://codepen.io/cimmanon/pen/mucDv

<div class="foo"></div>
<div class="group">
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
</div>
<div class="foo"></div>

CSS:

.group {
  overflow: hidden;
  margin: -10px 0 -10px 10px;
  padding-right: 10px;
  position: relative;
}

.group:before {
  display: block;
  content: '';
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 20px; /* 20px instead of 10px due to padding */
  bottom: 10px;
  left: 10px;
  background: #666;
}

.node {
  width: 100px;
  height: 100px;
  float: left;
  background: #333;
  margin: 10px;
}

.foo {
  height: 20px;
  background: #00f;
  margin: 20px;
}