>容器#666有保证金：20px;溢出：隐藏;
>节点#333有边距：20px 0 0 20px;向左飘浮;.
>节点#333有边距：20px 0 0 20px;向左飘浮;.
例如,http://jsbin.com/owejal/3/edit或图片：
但是,预期的结果是：
>容量为20px的容器,
>中间有20px边距的儿童,但不包括容器.
这可以使用负填充(即,如果容器具有填充：-20px 0 0 -20px)来实现,尽管这种情况不存在.
使用附加元素(http://jsbin.com/owejal/4/)可以实现所需的结果,但我很想知道是否只有CSS解决方案.
解决方法
如果您只关心元素之间的间距,则可以丢弃伪元素.它只适用于背景.
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;
- }
