css內邊距指的是元素內部邊框與實際內容之間的距離,它可以用padding屬性進行設置。
.box { padding: 20px; /* 上、右、下、左:20px */ }
上面的代碼中,.box類的內部四周都設置了20px的內邊距。也可以單獨設置某一個方向的內邊距,如:
.box { padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; }
上面的代碼中,.box類的上、下、左、右分別設置了10px、20px、30px、40px的內邊距。
除了像上面那樣使用固定數值外,還可以使用百分比表示內邊距的大小,如:
.box { padding: 5% 10% 15% 20%; /* 上右下左分別為:5% 10% 15% 20% */ }
上面的代碼中,.box類的上、右、下、左分別為寬度的5%、10%、15%、20%。
需要注意的是,元素的內邊距會影響元素的大小,如果設置了寬度和內邊距,那么元素的實際寬度就是寬度加上內邊距。因此我們需要在設計樣式時考慮到內邊距的影響。