制作元素容器，其中包含元素之间的边距而不是容器？

Question

• 容器#666有margin: 20px; overflow: hidden;。
• 节点#333有margin: 20px 0 0 20px; float: left;。

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

但是，预期的结果是：

• 保证金为20px的容器，
• 中间有20px边距的儿童，但不包含容器。

这可以使用负填充（即容器有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;
}

Answer 2

这有点hacky，但是如何用一些策略性放置的伪元素隐藏顶部和左边缘区域？ http://jsfiddle.net/SUJtd/

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

.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}

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

Answer 3

没有额外的HTML标记 - 但课程更改＆amp; 没有伪元素

一个可能对你有用的简单技巧： http://jsbin.com/owejal/65/edit

截图：

将使用所有可能数量的节点：）

<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="foo2"></div>

CSS：

.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
  height:20px;
  background:#00f;
  border-top:20px solid white;
  margin:20px;
  margin-top:-20px;
}

Answer 4

由于您未提及可退款性作为要求，因此您可以像在此处一样简单地使用第n个子申报：

http://jsbin.com/owejal/51/

但是，此解决方案针对父容器的固定宽度进行了优化，因此例如，行中应始终有4个元素。尽管如此，它只是css。

Answer 5

将节点的边距更改为：

.node { margin: 0 20px 20px 0; }

见http://jsbin.com/owejal/52/edit。请注意，这仍然会在底部为您提供额外的填充，但这是一个不容易解决的常见问题。有关解决此问题的各种方法，请参阅http://css-tricks.com/spacing-the-bottom-of-modules/（尽管在您提供的情况下，这些解决方案都不起作用）。

Answer 6

以下CSS将为您提供所需的结果，实际上您仍有2个限制：

1. 如果更改了body的背景，则需要更新element .foo
的边框颜色
2. 内部节点仍然有右边距，这也是你想要的结果屏幕截图（.group可以有5个节点，但在这个解决方案中它只有4个节点）。

.group {
    overflow: hidden;
    margin: 20px; /* margin is required */ 
    background: #666;  
}
.node {
    width: 100px;
    height: 100px;
    float: left;
    background: #333;
    margin: 0px 20px 20px 0px;
}
.foo { 
    height: 20px;
    background: #00f;
    margin: 20px; 
}
.group + .foo { 
    height: 20px;
    background: #00f;
    margin: 20px; 
    position: relative;
    top:-40px;
    border-top: 20px solid #fff;
}

您仍然可以找到解决方案here