CSS中設定表格單元格(td)的上下邊距非常簡單。在CSS中,我們可以使用padding屬性來設置td的上下邊距,也可以使用border-spacing屬性來設置單元格之間的距離。
padding屬性是用來設置單元格內(nèi)部內(nèi)容與單元格邊緣之間的距離。通過設置上下padding值,我們可以輕松地設定單元格的上下邊距。例如,以下代碼將設置單元格上下邊距均為10px:
td { padding-top: 10px; padding-bottom: 10px; }我們也可以將上下padding值設為相同的值:
td { padding: 10px 0; }這將使單元格的上下邊距均為10px。 另一方面,border-spacing屬性是用來設置單元格之間的間距的。它可以在表格容器(table)中設置,也可以在單元格(td)中設置。如果在表格容器中設置,它會影響到整個表格的間距;如果在單元格中設置,它會覆蓋表格容器中的設置。 以下是一個示例,其中表格容器的border-spacing值為10px:
table { border-spacing: 10px; }這將使每個單元格之間的間距均為10px。如果我們想要改變單獨td的上下邊距,我們可以通過設置單元格的padding值來實現(xiàn):
td { padding-top: 20px; padding-bottom: 20px; }這將使每個單元格的上下邊距均為20px,而單元格之間的間距仍然是10px。 在使用CSS樣式時,請記住,盡管我們可以使用padding屬性和border-spacing屬性來設定單元格的上下邊距,但在實際中,我們應該使用它們的搭配,以實現(xiàn)更好的視覺效果。