資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
