Html 为什么一个div带有“quot；显示：表格单元格&引用；不受保证金影响？

我有

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>

1
1.
如果像这样彼此相邻的div

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

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

</div>



这应该管用
 原因
发件人：

[边距属性]适用于除具有
表标题、表和内联表以外的表显示类型

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

解决方案
考虑改用属性

注：应将其应用于具有
显示：表格
布局和
边框折叠：分离
的父元素

例如：

HTML

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

见

水平和垂直边缘不同

正如Diego Quroós所提到的，
边框间距
属性也接受两个值，为水平轴和垂直轴设置不同的边距

比如说

.table{/*…*/边框间距：3px 5px；}/*3px水平方向，5px垂直方向*/
您可以使用内部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>


1.
1.

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

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

注意：此处不能使用百分比…：（
谢谢！如果水平和垂直空间需要不同的边框间距，还有一种表示法：水平-垂直；我想我发现了一个bug；结果我需要学习更多CSS。我想这并不能真正处理特定的左/右/上/下页边距？而且没有办法让特定的表格单元格有不同的填充其余的？@Nathan
填充
可以为任何必要的选择器设置（例如，类或id），与往常一样。如果您指的是单元格之间的
边距
，则可以通过将两个值设置为
边框间距
，来分别设置垂直轴和水平轴的边距，但它将应用于整个表格，而不是单个单元格。好吧，但是如果他想要两个等高的div呢？Float不能做到这一点。这就是为什么awesome:）@ChrisHappy在有CSS解决方案时从不使用JavaScript。您的代码变得笨重。@ssc-hrep3随着响应性的需求而来，笨重的CSS解决方案不再足够……它们已经足够了——特别是对于响应性需求。只需看一看现在支持的和解决这个确切的问题非常容易。布局样式永远不应该由JavaScript完成。如果您希望单元格之间留有空白，而不是单元格的左侧或右侧，这是一个好主意。然后，您的CSS可能类似于
。内部div{margin right:5px；}。外部单元格：最后一个子。内部div{margin right:0；}
。但也要注意这个问题：这个例子中的红色和绿色背景在高度上不一定匹配，因为它们不在单元格上。