2

Is it possible to add spacing between the cells? 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>test</title>
  <style>
   #wrap {
    display: table-row;
    /* there is no also cellspacing in CSS afaik :( */
   }
   #wrap div {
    display: table-cell;
    /* margin: 40px; doesn't work for table-cell :( */
    /* border: 30px solid transparent; works but it's as good as adding padding */
    /* border: 30px solid white; works but the page background is invisible */

    /* decoration: */
    background-color: green;
    padding: 20px;
   }
  </style>
 </head>
 <body>
  <!-- don't touch the markup -->
  <div id="wrap">
   <div>text1</div>
   <div>text2</div>
  </div>
 </body>
</html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
antpaw
  • 15,444
  • 11
  • 59
  • 88
  • possible duplicate of [How to set cellpadding and cellspacing in CSS?](http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css) – user Mar 07 '14 at 20:42

1 Answers1

4

Use margin property:

#wrap div {
background-color:green;
float:left;
margin:10px;
padding:20px;
}

If this is not exactly what you want to achieve, please let me know so that I can help.

Edit: Another approach is to do this:

#wrap {
border-spacing:20px;
display:inline-table;
}

but note that border-spacing is not fully supported on all browsers (IE6 & IE7 does not support it).

o15a3d4l11s2
  • 3,969
  • 3
  • 29
  • 40
  • 1
    i liked your first solution with "border-spacing" better because float will drive me into the clear hell. too bad there is no "border-spacing-left" – antpaw Mar 26 '10 at 09:42
  • margin does not work on items displayed as a table-cell. In the event the user wants to build a variable row of N items that automatically fill the space they are given, you need table-cell until a newer CSS feature becomes widely supported. In this case, only your second answer applies, and it would be great if you could clarify this. – Brent Jul 24 '13 at 19:37