在CSS中,可以使用padding屬性定義元素的內(nèi)邊距,也就是元素邊框和元素內(nèi)容之間的空間。這個屬性的值可以是一個具體的像素值,也可以是一個百分比。
下面是一個簡單的實例代碼:
.box { width: 200px; height: 100px; background-color: #f00; padding: 20px; }
上面的代碼定義了一個寬為200像素、高為100像素、背景顏色為紅色的盒子。并且給這個盒子設(shè)置了上、右、下、左各20像素的內(nèi)邊距。
這樣,這個盒子的實際寬度就是240像素(200 + 20 + 20),高度是140像素(100 + 20 + 20)。而盒子中的內(nèi)容則會距離盒子邊框20像素。
如果只想定義上下或左右兩個方向的內(nèi)邊距,也可以使用padding-top、padding-right、padding-bottom、padding-left這四個屬性。例如:
.box { width: 200px; height: 100px; background-color: #f00; padding-top: 20px; padding-bottom: 20px; }
上面的代碼定義了一個寬為200像素、高為100像素、背景顏色為紅色的盒子。并且給這個盒子設(shè)置了上下各20像素的內(nèi)邊距。
這樣,這個盒子的實際寬度仍然是200像素,高度是140像素(100 + 20 + 20)。而盒子中的內(nèi)容則會距離盒子上下邊框20像素。