为什么 div 带有“display: table-cell;”不受保证金影响？答案

【问题标题】：Why is a div with "display: table-cell;" not affected by margin?为什么 div 带有“display: table-cell;”不受保证金影响？
【发布时间】：2021-10-16 02:16:36
【问题描述】：

我有div 元素与display: table-cell; 相邻。

我想在它们之间设置margin，但是margin: 5px没有效果。为什么？

我的代码：

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

【问题讨论】：

标签： html css

【解决方案1】：

原因

来自the MDN documentation：

[边距属性]适用于所有元素，除了带有 table-caption、table 和 inline-table 以外的表格显示类型

换句话说，margin 属性不适用于display:table-cell 元素。

解决方案

考虑改用border-spacing 属性。

请注意，它应该应用于具有display:table 布局和border-collapse:separate 的父元素。

例如：

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

见jsFiddle demo

水平和垂直边距不同

正如 Diego Quirós 所述，border-spacing 属性还接受两个值来为水平轴和垂直轴设置不同的边距。

例如

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

【讨论】：

谢谢！如果水平和垂直空间需要不同的边框间距，也有这种表示法：水平垂直；
我以为我发现了一个错误；原来我需要学习更多的 CSS。
我猜这并不能真正处理特定的左/右/上/下边距？并且没有办法让特定的表格单元格具有与其他单元格不同的填充？
@Nathan padding 可以像往常一样为任何必要的选择器（例如类或 id）设置。如果您的意思是单元格之间的margin，那么可以通过将两个值设置为border-spacing 来分别设置垂直轴和水平轴，但它将应用于整个表格而不是单个单元格。

【解决方案2】：

您可以使用内部 div 设置边距。

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS Fiddle

【讨论】：

如果您想要单元格之间的边距而不是它们的左侧或右侧，这是一个好主意。那么你的 CSS 可能类似于.inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }。但也要注意这个问题：这个例子的红色和绿色背景在高度上不一定匹配，因为它们不在单元格上。

【解决方案3】：

表格单元格不考虑边距，但您可以改用透明边框：

div {
  display: table-cell;
  border: 5px solid transparent;
}

注意：这里不能使用百分比... :(

【讨论】：

【解决方案4】：

如果你有这样的 div 彼此相邻

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

这应该可行！

【讨论】：

好的，但是如果他想要两个高度相等的 div 怎么办？ Float 无法做到这一点。
这就是为什么JS 很棒:)
@ChrisHappy 当有 CSS 解决方案时，永远不要使用 JavaScript。您的代码变得庞大。
@ssc-hrep3 随着响应能力的出现，笨重的 CSS 解决方案已经不够用了……
它们就足够了——尤其是响应式需求。只需看看flexbox，它现在由most of the major browsers 支持，并且很容易解决这个确切的问题。布局样式不应该由 JavaScript 完成。

【解决方案5】：

我也在寻找如何使用display: table-cell;（以便使高度相等）以及left-margin。没有建议的解决方案对我有用。所以我来到了我的转储解决方法 - 我只是添加了一个带有display: table-cell; 的跨度，宽度为所需的边距大小。不优雅，但很有效。

【讨论】：