Make container of elements with margin in-between elements but not the container?

Question

• Container #666 has margin: 20px; overflow: hidden;.
• Nodes #333 have margin: 20px 0 0 20px; float: left;.

Example, http://jsbin.com/owejal/3/edit or picture:

However, the intended result is:

• container with 20px margin,
• children with 20px margin in-between, but not with the container.

This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.

The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.

Answer 1

If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.

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>

The 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

This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements? 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;}