2

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 pixels on the three child divs. How would I go about adding margin between the child divs so that the space is put on the outside of the border rather than on the inside?

Matt
  • 2,317
  • 7
  • 41
  • 52
  • Can you provide a [jsfiddle](http://jsfiddle.net/) ? Or post your code ? – Vucko Jan 09 '13 at 01:57
  • Try this: http://stackoverflow.com/questions/716442/css-cell-margin it might help. – Christopher Mata Jan 09 '13 at 02:02
  • @ChristopherMata - won't padding contribute to space inside of the border? I want the space to be applied outside of the border. – Matt Jan 09 '13 at 02:16
  • possible duplicate of [space between divs - display table-cell](http://stackoverflow.com/questions/18346083/space-between-divs-display-table-cell) – Hashem Qolami Feb 23 '14 at 14:13

1 Answers1

5

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;    
}
DrCord
  • 3,917
  • 3
  • 34
  • 47
  • Yes! This is what I am after! Is there any way to only apply the border-spacing to left and right side of Cell 2?? I am stacking the divs horizontally and would only like the middle div (Cell 2) to have left/right cell spacing. – Matt Jan 09 '13 at 02:56
  • I do not believe that is possible, sorry. table alignment and positioning is somewhat limited in CSS. – DrCord Jan 09 '13 at 03:07