使容器中的元素容器具有边缘而不是容器？

Question

• 集装箱#666有margin: 20px; overflow: hidden;。
• 节点#333有margin: 20px 0 0 20px; float: left;。

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

然而，预期的结果是：

• 与20像素余量容器，
• 儿童在中间20像素余量，但不是与容器。

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

想要的结果可以使用额外的元素（http://jsbin.com/owejal/4/）来实现，尽管我很想知道是否只有CSS解决方案。

Answer 1

下面的CSS会得到你想要的结果，其实你仍然有2个限制：

1. 如果改变身体的背景下，你需要更新元素的边框颜色包含.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

Answer 2

因为你没有提到可调整大小的要求，你可以简单的使用n个子声明也喜欢在这里：

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

但是，此解决方案针对父容器的固定宽度进行了优化，因此总是应该有4个元素举例来说，尽管如此，它只是CSS。

Answer 3

更改节点的保证金：

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

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

Answer 4

这是一个小黑客，但如何隐藏顶部和左边缘区域与一些战略性放置伪元素？ 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 5

如果你只关心元素之间的间距，则可以放弃伪元素。这只是背景。

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 6

没有多余的HTML标记 - 但一类变化& 无伪元素

一个简单的技巧这可能应该工作为你： 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; 
}