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