How Do I Add Margin Between Divs That Are Set To Display Table-cell?

I set a parent div to display: table and its respective three child divs to display: inline-cell. These three child divs are horizontally stacked and I have set a border of three p

Solution 1:

Your css is invalid: "display: inline-cell" is not a valid css declaration. You will need to use "display: table-cell" instead. If you want them to stack on top of each other that can be done as well, you will need to wrap each "table cell" into a "table row".

HTML

<div class="table">
    <div class="tableRow">
      <div class="tableCell">Cell 1</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 2</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 3</div>
    </div> 
</div>

CSS

.table{
border: 2px solid #999;
display: table;
border-spacing: 15px;
}
.tableRow{
    display: table-row;
}
.tableCell{
    border: 3px solid #333;
    border-collapse: separate;
    display: table-cell;
    border-collapse: separate;    
}