Html div之间的空间-显示表格单元格

我有两个部门：

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

内容
内容

有没有办法在这两个div（具有

显示：表格单元格

）之间留出空间？

您可以使用属性：

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

还有其他选择吗？

嗯，不是真的

为什么？

• margin

  属性到

  显示：表格单元格

  元素

• 填充

  属性不会在单元格边缘之间创建空间

• float

  属性将破坏

  表单元格

  元素的预期行为，这些元素可以与其父元素一样高

  ---

用任何名称创建一个新的div（我将使用table split）并为其指定一个宽度，而不向其添加内容，同时将其放置在需要分隔的必要div之间

您可以添加任何您认为必要的宽度。我只使用了0.6%，因为这是我不得不这样做时所需要的

。表拆分{
显示：表格单元格；
宽度：0.6%
}

---

尽可能使用透明边框

JSFIDLE演示

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

解释 您可以使用

边框间距

属性，正如公认的答案所示，但这不仅会在表格单元格之间生成空间，还会在表格单元格和表格容器之间生成空间。这可能是不需要的

如果表格单元格不需要可见边框，则应使用

transparent

边框生成单元格边距。透明边框需要设置

背景剪辑：填充框因为否则表格单元格的背景色将显示在边框上

IE9以上版本（以及所有其他现代浏览器）支持透明边框和背景剪辑。如果您需要IE8兼容性或不需要实际的透明空间，只需设置白色边框颜色，并将
背景剪辑退出即可。

<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

内容
内容
好吧，上述方法确实有效，这是我的解决方案，它需要更少的标记，而且更灵活


.cells{
显示：内联块；
浮动：左；
填充：1px；
}
.cells>.content{
背景：#EEE；
显示：表格单元格；
浮动：左；
填充：3倍；
垂直对齐：中间对齐；
}
我的手机1
我的手机2
还有其他选择吗？当然，
position:relative
@Jongosi根据：
position:relative
对
表-*-group
，
表行
，
表列
，
表单元格
和
表标题
元素的影响未定义。您还可以创建与背景颜色相同的单面边框<代码>右边框：10px实心#FFF
。当我想在
表格单元格
元素之间留出一些空间时，在设计CSS下拉菜单时，这对我来说非常有效。你也可以纯粹为了间隔而添加单元格。不太理想，但至少你避免了在最右边的单元格上关闭边框间距的麻烦。我还希望“填充”只在“单元格”的一条边上，所以我不得不使用armadadrive的解决方案，除了我使用rgba（0,0,0,0）的边框颜色作为透明边框，所以我不必担心背景色/图像。右边框：10px实心rgba（0,0,0,0）；这是一个糟糕的解决方案。当实际的表元素被用于布局目的时，这是一种常见的策略，部分原因是该方法现在已经过时。因为它只能通过css来实现，html的使用应该避免“右边框”设置实际上足以提供之间的空间，不需要“表”声明。
<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>