数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学为什么 div 设置 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 部分，我们将它们的 display 属性都更改为 table-row 并外部添加了 margin。让我们看看输出结果以查看是否添加了 margin。
在上面的输出中，你可以看到这两个容器之间没有添加 margin，请记住我们已将它们的 display 属性都更改为 table-row。
现在，你可能想知道为什么会这样。margin 应该已经添加到 table-row 中，为什么这里忽略了 margin？
我们在这里使用的 margin 属性适用于所有元素，除了 display 属性为表格类型的元素，这意味着 margin 属性不适用于 table-cell 属性。padding 属性也不会在表格单元格之间创建空间。那么，我们该如何做到这一点呢？
我们可以通过不同的方法向这些表格单元格添加 margin，例如使用 border-spacing 属性或以不同的方式使用 margin 属性。
使用 border-spacing 属性
我们将要介绍的第一个方法是 border-spacing 属性，它将应用于父元素，并将 display 属性设置为“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 属性并将 display 属性设置为 table-cell。让我们看看使用上述代码后我们的输出会是什么样子。
在上面的输出中，你可以看到在使用 border-spacing 属性后，表格单元格之间已添加了 margin。
使用 margin 属性
我们将要使用的第二种方法是向内部 DIV 添加 margin 属性。当我们将 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>
在上面的输出中，你可以看到绿色部分和蓝色部分之间由 margin 分隔，这意味着在内部 div 中声明的 margin 在表格单元格之间添加了 margin。
结论
margin 属性在元素之间添加 margin，但它不适用于 display 属性为表格类型的元素。margin 对于对齐网页上的元素非常重要。元素的对齐确保用户能够正确阅读和理解内容，并使网站看起来更简洁。
1K+ 次浏览
