CSS單元格填充,也叫單元格內邊距,指的是單元格內部的空間,用于調整單元格內容到單元格邊緣的間距。CSS單元格填充可以使用padding屬性來進行設置,padding屬性具體用法可以看下面代碼示例。
table { border-collapse: collapse; } td { padding: 10px; border: 1px solid black; }
在上述代碼中,table設置為border-collapse: collapse,這是為了確保單元格中的邊框不會重疊。td設置padding屬性為10px,這意味著單元格內容與單元格邊緣的間距為10px。同時,為了使單元格擁有邊框,td還設置了border屬性為1px solid black。
除了padding屬性之外,還可以使用padding-top、padding-bottom、padding-left和padding-right分別控制單元格上、下、左、右四個方向的填充。例如:
td { padding-top: 10px; padding-bottom: 5px; padding-left: 20px; padding-right: 15px; }
在上述代碼中,我們分別給單元格的上下左右四個方向設置了不同的填充值,這樣單元格內容距離邊緣的間距就會有所不同。在實際開發中,我們可以結合具體的需求來靈活應用padding屬性進行單元格填充的設置。
上一篇css 卡片式布局