CSS盒子內的填充(padding)屬性是指在元素內容和邊框(border)之間的空間。使用padding可以讓元素與其周圍的元素保持一定的距離。同時也可以讓元素內容與邊框之間形成一定的間隔。
padding可以接受的值有:長度值、百分比、inherit。
長度值:可以使用像素(px)、百分比(%)、em、rem等,表示填充區域的大小。例如:
.box { padding: 10px; /* 上、右、下、左都是10px */ padding: 10px 20px; /* 上下都是10px,左右都是20px */ padding: 5px 10px 15px 20px; /* 上、右、下、左分別是5px、10px、15px、20px */ }
百分比:可以根據元素寬度或高度的百分比來計算填充區域大小。例如:
.box { width: 200px; height: 200px; padding: 10%; /* 填充區域的大小為元素寬度和高度的10% */ }
可以設置填充的上下左右單獨的值,也可以使用padding-top、padding-right、padding-bottom、padding-left等屬性單獨設置。例如:
.box { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }
使用padding屬性可以讓元素的內容與邊框之間形成一定的間隔。同時也可以讓元素與其周圍的元素保持一定的距離。padding也可以用于調整元素的大小和位置等。因此,在頁面布局中,padding是非常常用的屬性之一。