css – 在元素之间创建带边距但不包含容器的元素容器？

>容器#666有保证金：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;
}

原文地址：https://www.jb51.cc/css/214428.html