使用display:table单元格时，无法在div之间给定空格

Question

我想将3个div并排对齐。所以我将display:table用于父div，将display:table-cell用于内部3个div。

前2个div的宽度已知，第3个div的长度未知。因此，display:table-cell的使用对我调整第三部分的宽度非常有效

现在，如果我想用margin-left或margin-right给出3个div之间的间距，那么没有效果。请在此处检查代码。

如果我们能做到，请告诉我。提前谢谢。

Answer 1

这应该有效：

 #wrapper div {
      display: table-cell;
      height:100px;
      /* creates space */
      border:5px solid transparent;
      background-clip:padding-box;
  }

您可能想通过以下方式设置一个不同的框模型，以在元素的宽度中包括边框：

box-sizing:border-box;

Answer 2

使用border属性来提供类似的空间

border:solid 10px transparent;

Answer 3

试试这个

#wrapper {
    display: table;
    table-layout: fixed;
    width:100%;
    height:100px;
    background-color:Gray;
    border-spacing:10px;
}

演示

Answer 4

表格单元格不能有边距。你可以通过使用透明边界来调整一下，如果这不能解决你的问题，那么就没有其他方法了。