CSS 为什么display: table-row属性会忽略margin

你可能会遇到这样一种情况，多个div元素并列排列，并且它们的display属性为table-cell, 在它们之间没有margin。如果你想要在它们之间设置margin，你需要通过在外部添加margin来实现。

在本文中，我们将探讨display: table-row属性为什么忽略margin以及如何在需要时添加margin。

如何给表格添加margin

你可能在想，如果我们在table-row中进行外部添加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属性。让我们看一下输出，看看是否添加了margin。在上面的输出中，您可以看到这两个容器之间没有添加任何margin，并且请记住我们将它们的显示都更改为了table-row。现在，您可能会想知道为什么会这样。margin应该已经添加到了table-row上，为什么这里忽略了margin呢？我们在这里使用的margin属性适用于所有元素，除了具有table显示类型的元素之外。这意味着margin属性不适用于table-cell属性。padding属性也不能在表格单元格之间创建间距。那么我们该怎么做呢？我们可以使用不同的方法来为这些表格单元格添加margin，其中包括border-spacing属性和以不同的方式使用margin属性。使用border-spacing属性我们要查看的第一种方法是使用border-spacing属性，它将应用于父元素，并将display设置为”表格布局”和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属性，并将display设置为table-cell。让我们看一下使用上述代码后的输出。

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

使用margin属性

我们将使用的第二种方法是将margin属性添加到内部DIV。当我们将margin属性添加到外部div时，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中声明的margin在表格单元格之间添加了间距。