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