We can't use margin with display : table-cell. But we make gutters by transparent border & background-clip.
Table-cell is a useful value of display property. We can use it on IE8+ and others. But, margins are ignored.
This sample is the way of making gutters for table-cell elements.
This trick's key-points are transparent border & background-clip :padding-box. You can use this trick in the liquid layout and solid layout.
We can use background-clip property on IE9+ and others.
.wrap { margin: 3em auto;
width: 82%;
width: calc(80% + 1em);
font-size: 1em;
padding: 0; }
.wrap .cell {
display: table-cell;
width: 33%;
padding: 1em;
line-height: 1.3;
background: rgba(255,63,17,0.8);
border:0 transparent solid;
border-width: 0 0.5em;
background-clip:padding-box; }