本文目錄導讀：

1. 使用外邊距（margin）設(shè)置間距
2. 使用內(nèi)邊距（padding）設(shè)置間距
3. 使用border屬性設(shè)置間距

CSS技巧：創(chuàng)建表格行（tr）間的間距

在網(wǎng)頁設(shè)計中，有時我們需要調(diào)整表格行（tr）之間的間距，以增強頁面的視覺效果和用戶閱讀體驗，雖然HTML表格本身沒有直接的間距設(shè)置，但我們可以通過CSS樣式來實現(xiàn)這一需求，本文將介紹如何通過CSS在表格行之間設(shè)置間距。

使用外邊距（margin）設(shè)置間距

我們可以利用CSS中的margin屬性為表格行添加間距，具體做法是在CSS樣式表中為tr元素添加margin值。

tr {
    margin: 10px 0; /* 上下間距為10px，左右間距為0 */
}

這種方法簡單有效，但需要注意，如果表格所在的容器（如div）有邊框或背景色，可能會因為外邊距導致行與容器之間的間距不均。

使用內(nèi)邊距（padding）設(shè)置間距

另一種方法是使用內(nèi)邊距（padding）來設(shè)置tr之間的間距，我們可以在tr元素內(nèi)部添加padding值，以增加行與行之間的間距。

tr {
    padding: 10px 0; /* 單元格內(nèi)部上下間距為10px，左右間距為0 */
}

這種方法不會受到容器邊框或背景色的影響，但需要注意的是，增加內(nèi)邊距可能會改變表格的整體布局和單元格內(nèi)容的對齊方式。

使用border屬性設(shè)置間距

除了上述兩種方法，我們還可以利用border屬性來間接實現(xiàn)tr之間的間距，通過給表格元素添加邊框，并在邊框之間設(shè)置一定的間距，從而達到增加行間距的效果。

table {
    border-collapse: separate; /* 使邊框分離，創(chuàng)建間距 */
    border-spacing: 10px 0; /* 設(shè)置邊框之間的間距 */
}

這種方法適用于需要精細控制表格布局和邊框樣式的場景，但需要注意的是，border屬性可能會影響到表格的整體布局和單元格的顯示。

通過CSS的margin、padding和border屬性，我們可以輕松實現(xiàn)表格行之間的間距設(shè)置，在實際應用中，可以根據(jù)需求和場景選擇合適的方法，還需要注意保持頁面布局的整潔和美觀，以提高用戶體驗。