为什么div display: table-row会忽略margin

你可能遇到过这样的情况：几个div元素在一起，并且彼此相邻，属性为display: table-cell，但它们之间没有边距。如果你想在它们之间设置一个边距，你需要通过在外部添加边距。

在这篇文章中，我们将看看为什么display: table–row会忽略margin，以及如果我们想添加margin，该如何添加。

如何在表格中添加margin

你可能会想，如果我们在表行中从外部添加margin，那么这可能会给表添加margin。但是，让我们看看当我们在外部添加margin的时候会发生什么。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of adding the margin to the table</title>
   <style>
      .dog{
         display: table-cell;
         margin: 50px;
         background-color:green;
      }
      .frog{
         display: table-cell;
         margin: 50px;
         background-color:blueviolet;
      }
   </style>
</head>
<body>
   <div class="dog">100</div>
   <div class="frog">200</div>
</body>
</html>

在上面的代码中，我们做了一个div容器，在其中添加了两个数字，并给了它们类。之后，在CSS部分，我们将这两个容器的显示方式改为table-row，并在外部添加了margin。让我们看一下输出结果，看看是否添加了边距。

在上面的输出中，你可以看到在这两个容器之间没有添加任何边距，记住，我们把它们的显示方式都改为table-row。

现在，你可能想知道为什么会发生这种情况。页边距应该被添加到表行中，为什么页边距在这里被忽略了？

我们在这里使用的margin属性适用于所有元素，除了属于表格显示类型的元素，这意味着margin属性不适用于table-cell属性。padding属性也不能在表格单元格之间创建空间。那么，我们怎样才能做到这一点呢？

我们可以通过不同的方法为这些表格单元格添加边距，这些方法是边框间距属性和以不同的方式使用边距属性。

使用border-spacing属性

我们要看的第一个方法是border-spacing属性，它将被应用于一个父元素，并设置显示为 “table layout “和border-collapse。

而且，这里有它的代码。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of adding the margin to the table</title>
   <style>
      .table {
         display: table;
         border-collapse: separate;
         border-spacing: 15px;
      }
      .row {
         display: table-row;
      }
      .cell {
         display: table-cell;
         padding: 5px;
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <div class="table">
      <div class="row">
         <div class="cell">Hi everyone</div>
         <div class="cell">Welcomme to another tutorial</div>
         <div class="cell">We will learn about bhow to add margin</div>
      </div>
   </div>
</body>
</html>

在上面的代码中，我们首先创建了div元素，然后给了它们类，之后在CSS部分我们添加了border-collapse属性，并将显示方式设置为table-cell。让我们看看使用上述代码后，我们的输出会是什么样子。

在上面的输出中，你可以看到，在我们使用border-spacing属性后，表格单元格之间已经添加了margin。

使用 margin 属性

我们将使用的第二个方法是为内部DIV添加margin属性。当我们为外部DIV添加margin属性时，margin属性并不工作。margin属性将在内部DIV中起作用，所以让我们看看另一个例子，这样我们就能理解margin属性是如何工作的。

示例

在下面的例子中，我们创建了两个div，并在其中添加了嵌套div。在外层 div 中，我们使用了属性 display 并将其值设置为 table cell，并给这些 div 赋予了两种不同的颜色来表示它们。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Using the margin property on the inner DIVs</title>
</head>
<body>
   <div style="display: table-cell;">
      <div style="margin: 15px; background-color: lightgreen;">
         Hi everyone welcome to another tutorial!!
      </div>
   </div>
   <div style="display: table-cell; ">
      <div style="margin: 25px; background-color: lightblue;">
         Good Morning!!
      </div>
   </div>
</body>
</html>

在上面的输出中，你可以看到绿色部分和蓝色部分被一个边距隔开，这意味着在内部div中声明的边距增加了表格单元格之间的边距。