display:table-cell with gutter

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; }